개발공부 임고미

[JavaScript] 타이머 만들기 본문

퍼블리싱/html css js

[JavaScript] 타이머 만들기

임고미 2020. 9. 14. 09:44
728x90
300x250

html

html에 들어갈 위치 만들어주기

<div id="d-day-hour"></div>
<div id="d-day-min"></div>
<div id="d-day-sec"></div>

Js

시 + 분 + 초

  //시 분 초
  
  var countDownDate = new Date('2020-09-18').getTime() + (1000 * 60 * 60 * 15);
  var x = setInterval(function () {
    var now = new Date().getTime();
    distance = countDownDate - now;
    if (distance > 0) {
      var h = Math.floor(distance / (1000 * 60 * 60));
      var m = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      var s = Math.floor((distance % (1000 * 60)) / 1000);
      $('#d-day-hour').text(h);
      $('#d-day-min').text(m);
      $('#d-day-sec').text(s);
    } else {
      $('#d-day-hour').text(0);
      $('#d-day-min').text(0);
      $('#d-day-sec').text(0);
      clearTimeout(x);
    }
  });

9월 18일까지 남은시간

날짜 + 시 + 분 + 초

  //날짜 시 분 초
  
  var countDownDate = new Date('2020-09-18').getTime() + (1000 * 60 * 60 * 15);
  var x = setInterval(function(){
    var now = new Date().getTime();
    distance = countDownDate - now;
    if(distance > 0){
      var d = Math.floor(distance / (1000 * 60 * 60 * 24));
      var h = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var m = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      var s = Math.floor((distance % (1000 * 60)) / 1000);
 
      d = d < 10 ? "0" + d : d;
      h = h < 10 ? "0" + h : h;
      m = m < 10 ? "0" + m : m;
      s = s < 10 ? "0" + s : s;
 
      $('#d-day-hour').text(h);
      $('#d-day-min').text(m);
      $('#d-day-sec').text(s);
    }
  })
728x90
300x250

'퍼블리싱 > html css js' 카테고리의 다른 글

[Javascript] selectbox placehorder 만들기  (0) 2020.09.14
[Javascript] 전부 동의했는지 체크하기  (0) 2020.09.14
[java script] 공백(빈공간) 제거하기  (0) 2020.09.10
[Java script] 플러그인 사용안하고 정규식 체크(Validate)  (0) 2020.09.10
[Java script] 객체 빈값 확인하기  (0) 2020.09.10
'퍼블리싱/html css js' Related Articles more
Comments