[JavaScript] 타이머 만들기

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);
    }
  })