반응형

랜덤숫자를 생성할때 Math.random()를 사용하게 되면 0~1 사이의 랜덤값이 나오게 된다

예제에서도 0.6126455291899326의 숫자가 생성되는데 소수점 이하의 숫자에서 n개의 숫자를 가져오기위해

substr(beginIndex, length) 로 가져오면 간단하게 랜덤 n개의 숫자를 가져올수 있다

$(document).ready(function(){
    createOtpNumber(6);
});

function createOtpNumber(n){
    let otp = Math.random();

    console.log("Math.random() :", otp);
    console.log("Math.random().toString().substr(2, n) :", otp.Math.random().toString().substr(2, n));
}

 

 

참고자료

https://stackoverflow.com/questions/21816595/how-to-generate-a-random-number-of-fixed-length-using-javascript

반응형

'JavaScript／JQuery' 카테고리의 다른 글

[JQuery] countdown  (0) 2023.06.05
[JQuery] Enter keyup event  (0) 2023.03.27
[JavaScript] JSON 형태로 데이터 조작 JSON.parse(), JSON.Stringify()  (0) 2023.03.27
[JQuery] 속성 값으로 노드 찾아서 조작  (0) 2023.01.26
[JQuery] 같은 value값을 가진 radio 버튼 checked true 설정  (0) 2022.12.14
반응형

view

<div>
	<input type="date" id="inputDate" value="2023-06-05">
    <input type="time" id="inputTime" value="18:00:00">
    <h3>퇴근까지 </h3>
    <div id="timer">
        <div id="days" style="display: inline-block; padding: 20px;"></div>
        <div id="hours" style="display: inline-block; padding: 20px;"></div>
        <div id="minutes" style="display: inline-block; padding: 20px;"></div>
        <div id="seconds" style="display: inline-block; padding: 20px;"></div>
    </div>
</div>

js

$(document).ready(function(){
    function makeTimer() {
        let dDay = $('#inputDate').val();
        let dTime = $('#inputTime').val();

        var endTime = new Date(dDay+" "+dTime);
        endTime = (Date.parse(endTime) / 1000);

        var now = new Date();
        now = (Date.parse(now) / 1000);

        var timeLeft = endTime - now;

        var days = Math.floor(timeLeft / 86400);
        var hours = Math.floor((timeLeft - (days * 86400)) / 3600);
        var minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600 )) / 60);
        var seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));

        if (hours < "10") { hours = "0" + hours; }
        if (minutes < "10") { minutes = "0" + minutes; }
        if (seconds < "10") { seconds = "0" + seconds; }

        $("#days").html(days + "<span>Days</span>");
        $("#hours").html(hours + "<span>Hours</span>");
        $("#minutes").html(minutes + "<span>Minutes</span>");
        $("#seconds").html(seconds + "<span>Seconds</span>");

    }
    setInterval(function() { makeTimer(); }, 1000);

});

 

 

 

아름다운 출처

https://codepen.io/piotrswioklo/pen/AGNdoq

반응형

'JavaScript／JQuery' 카테고리의 다른 글

[JQuery] 간단하게 랜덤 숫자 생성하기  (0) 2023.06.07
[JQuery] Enter keyup event  (0) 2023.03.27
[JavaScript] JSON 형태로 데이터 조작 JSON.parse(), JSON.Stringify()  (0) 2023.03.27
[JQuery] 속성 값으로 노드 찾아서 조작  (0) 2023.01.26
[JQuery] 같은 value값을 가진 radio 버튼 checked true 설정  (0) 2022.12.14
반응형

keyup은 키를 누른 후 뗀 순간 실행 되는 이벤트이다.

Enter 키의 keyCode는 13으로 아래와 같이 실행 할 경우 Enter를 눌렀을때 각 이벤트가 실행 된다

$('#{id}').on("keyup", (e) => {
   if(e.keyCode == 13) {
      // 검색 필터가 비어있는지 확인
      if($('#filter-input').val().replace(/(\s*)/g, "") == "") {
        // 검색 값 없는 경우 이벤트 처리
      } else {
		// 검색 값이 있는 경우 이벤트 처리
   	  }
});

 

참고자료를 보면 .keyCode는 더이상 사용되지 않는다고 한다.

하지만 사용시 적용은 잘되는것 보니 내가 사용하는 버전에서는 아직 사용 되는 것 같다.

만약 코드가 적용되지 않는다면 .keyCode 대신 e.key === "Enter" 를 사용하면 된다

 

 

$('#{id}').on("keyup", (e) => {
   if(e.key === "Enter") {
      // 검색 필터가 비어있는지 확인
      if($('#filter-input').val().replace(/(\s*)/g, "") == "") {
        // 검색 값 없는 경우 이벤트 처리
      } else {
		// 검색 값이 있는 경우 이벤트 처리
   	  }
});

 

 

참고자료

https://truecode-95.tistory.com/173

 

[jQuery] enter Event 처리하기 keyCode / key

keyup : 누른 키에서 손을 뗄 때 실행. $("#아이디명").keyup(function(e){ if(e.keyCode == 13){ // 호출할 함수나 기능 작성 } }); $("#아이디명").keyup(function(e){ if(e.which == 13){ // 호출할 함수나 기능 작성 } }); keydow

truecode-95.tistory.com

 

반응형

'JavaScript／JQuery' 카테고리의 다른 글

[JQuery] 간단하게 랜덤 숫자 생성하기  (0) 2023.06.07
[JQuery] countdown  (0) 2023.06.05
[JavaScript] JSON 형태로 데이터 조작 JSON.parse(), JSON.Stringify()  (0) 2023.03.27
[JQuery] 속성 값으로 노드 찾아서 조작  (0) 2023.01.26
[JQuery] 같은 value값을 가진 radio 버튼 checked true 설정  (0) 2022.12.14
반응형

String으로 설정한 DB 컬럼에 JSON 형태로 된 값을 넣어야했다.

 

JSON.parse(), JSON.Stringify()의 존재는 알고 있었는데

막상 JSON으로 만들 객체를 만들려니 헷갈려서 찾아보게 되었고 참고자료가 매우x1000000 도움이 되었다.

 

내가 하려고 한 작업은 아래와 같다.

각각 firstInput, secondInput, thirdInput으로 ID를 설정한 input 값을 가져 온 후

JSON 형태로 객체를 만들고 allInput이라는 hidden 설정 되어있는 input값에 넣은 후 Controller에 넘긴다.

 

JSON.stringify(); (JSON -> String 변환)

function getInputVal(){
    var data = new Object();
    data.first_input_value = $('#firstInput').val();
    data.second_input_value = $('#secondInput').val();
    data.third_input_value = $('#thirdInput').val();

    var jsonData = JSON.stringify(data);
    $('#allInput').val(jsonData);
}

Controller에서 로그를 찍어보면 아래처럼 String 타입으로 넘어가는 것을 확인할 수 있다.

{"first_input_value":"firstValue","second_input_value":"secondValue","third_input_value":"thirdValue"}

 

 

JSON.parse(); String-> JSON 변환

let allScore = JSON.parse(data.allScore);

JSON.parse({String type으로 JavaScript에 넘어온 데이터값});

JavaScript 콘솔에서 로그를 찍어오면 아래와 같이 JSON 형태로 변환 된 것을 확인할 수 있다.

first_input_value: "firstValue"
second_input_value: "secondValue"
third_input_value: "thirdValue"

 

 

 

 

참고 자료

https://fruitdev.tistory.com/190

 

[Javascript] JSON 형태의 데이터 생성하기

업무를 진행하다 보면 Json 형태의 데이터를 생성하여 전송하거나, 받는 경우가 종종 발생 한다. json 형태의 데이터는 일일히 문자열로 쭉 나열하여 규칙대로 만들수도 있지만, 구조가 복잡해 지

fruitdev.tistory.com

 

반응형

'JavaScript／JQuery' 카테고리의 다른 글

[JQuery] countdown  (0) 2023.06.05
[JQuery] Enter keyup event  (0) 2023.03.27
[JQuery] 속성 값으로 노드 찾아서 조작  (0) 2023.01.26
[JQuery] 같은 value값을 가진 radio 버튼 checked true 설정  (0) 2022.12.14
[JavaScript] 요소 접근하여 가져오기 - 선택자 활용  (0) 2022.04.29
반응형

history 함수를 통해 비동기 페이지의 전후 페이지 이동하는 것을 구현하였는데, 좌측의 사이드바 메뉴가 전페이지 메뉴가 클릭되어 있는 UI 오류를 발견했다.

 

사이드바는 a 태그로 구성되어있고 data-url로 url을 가져와서 이동을 하는 형식이였기 때문에

history.state.data 즉, 이동할 페이지의 url값을 가진 a 태그에 css 값을 주기위한 class명(여기서는 'active')을 추가해주기로 했다

 

window.onpopstate = function(event) {
    if(history.state == null){
        location.href = location.href;
    } else {
        $('nav.sidebar .nav-link.active').removeClass('active')
        $('a[data-url$="'+history.state.data+'"]').addClass('active');
        MP.loadContentWrapper(history.state.data);
    }
}

 

history.state에 값이 있으면 즉, 이동할 페이지가 있다면

모든 nav의 sidebar class에 존재하는 active 클래스를 삭제하고

data-url이 hitory.state.data에 들어가있는 즉, 이동할 페이지와 같은 속성을 가진 a 태그에 active class명을 추가한 후

로드하는 메소드에 url을 담아 실행한다는 의미

$('a[data-url$="'+history.state.data+'"]') 이부분이 자꾸 안잡혔는데

초반에 $('a[data-url$="history.state.data"]') 이런식으로 변수를 따로 안잡아 준게 문제였다

$('a[data-url$='+history.state.data+']') 이렇게 쌍땀을 생략하는것도 불가능하니 변수랑 섞어서 사용할때는 항상 주의하기!

반응형

'JavaScript／JQuery' 카테고리의 다른 글

[JQuery] Enter keyup event  (0) 2023.03.27
[JavaScript] JSON 형태로 데이터 조작 JSON.parse(), JSON.Stringify()  (0) 2023.03.27
[JQuery] 같은 value값을 가진 radio 버튼 checked true 설정  (0) 2022.12.14
[JavaScript] 요소 접근하여 가져오기 - 선택자 활용  (0) 2022.04.29
[JavaScript] 요소 접근하여 가져오기 - class 속성  (0) 2022.04.29
반응형

값을 가져온 후 해당 value 값을 가진 radio 버튼을 체크하고 싶었다

 

실패한 코드

$("input:radio[name='radio-category'][value='data[i].code']").prop('checked', true);

성공한 코드

$("input:radio[name='radio-category'][value='"+data[i].code+"']").prop('checked', true);

 

value값 안에 변수 값을 넣을때는 홑쌍땀을 잘 구분해서 넣자^^!

 

 

반응형

'JavaScript／JQuery' 카테고리의 다른 글

[JavaScript] JSON 형태로 데이터 조작 JSON.parse(), JSON.Stringify()  (0) 2023.03.27
[JQuery] 속성 값으로 노드 찾아서 조작  (0) 2023.01.26
[JavaScript] 요소 접근하여 가져오기 - 선택자 활용  (0) 2022.04.29
[JavaScript] 요소 접근하여 가져오기 - class 속성  (0) 2022.04.29
[JavaScript] 요소 접근하여 가져오기 - name 속성  (0) 2022.04.29
반응형

내가 원하는 요소 자유자재로 가져오기(선택자 활용)

document.querySelector("선택자"); -> 선택된 요소 하나만 반환
document.querySelectorAll("선택자"); -> 선택된 요소 객체들을 배열에 담아서 반환
</script>

<h3>5) 내가 원하는 요소 자유자재로 가져오기(선택자 활용)</h3>

<div id="test1">테스트입니다.</div>
<div class="test">
    <h2>하이</h2>
    <h2>바이</h2>
</div>
<span>Hello</span>
<h2>Byebye</h2>

<button onclick="accessSelector();">클릭</button>
<script>
    function accessSelector(){
        var divEl = document.querySelector("#test1"); // div요소객체
        var h2El = document.querySelectorAll(".test>h2"); // [h2요소객체, h2요소객체]
        var spanEl = document.querySelector(".test+span"); // span 요소객체

        console.log(divEl);
        console.log(h2El);
        console.log(spanEl);
    }
</script>

 

반응형

'JavaScript／JQuery' 카테고리의 다른 글

[JQuery] 속성 값으로 노드 찾아서 조작  (0) 2023.01.26
[JQuery] 같은 value값을 가진 radio 버튼 checked true 설정  (0) 2022.12.14
[JavaScript] 요소 접근하여 가져오기 - class 속성  (0) 2022.04.29
[JavaScript] 요소 접근하여 가져오기 - name 속성  (0) 2022.04.29
[JavaScript] 요소 접근하여 가져오기 - 태그명  (0) 2022.04.29

+ Recent posts

티스토리툴바