[javascript] 남은 시간, 타이머

1초마다 자동 갱신되는 타이머를 구해보자.

javascript함수중에 setInterval 이 함수가 핵심이다.

 

<em id="timeDeal"></em>
<script>
function CountDownTimer(dt, id) {
     var end = new Date(dt);
     var _second = 1000;
     var _minute = _second * 60;
     var _hour = _minute * 60;
     var _day = _hour * 24;
     var timer;
     function showRemaining() {
         var now = new Date();
         var distance = end - now;
         if (distance < 0) {
             clearInterval(timer);
             document.getElementById(id).innerHTML = '타임딜 종료됨';
             return;
         }
         var days = Math.floor(distance / _day);
         var hours = Math.floor((distance % _day) / _hour);
         var minutes = Math.floor((distance % _hour) / _minute);
         var seconds = Math.floor((distance % _minute) / _second);
         document.getElementById(id).innerHTML = days + '일 ';
         document.getElementById(id).innerHTML += hours + '시간 ';
         document.getElementById(id).innerHTML += minutes + '분 ';
         document.getElementById(id).innerHTML += seconds + '초';
     }
     timer = setInterval(showRemaining, 1000);
 }
 CountDownTimer('12/06/2020 10:50:00', 'timeDeal'); // 2020-12-06 오후10시 50분까지
</script>

 

참고 : riucc.tistory.com/557