Programming$/Web Develop

[Javascript] CountDown 구현

ch4rli3kop 2020. 8. 31. 22:19
반응형

[Javascript] CountDown 구현

A ~ B 까지의 특정 이벤트가 존재할 떄, 이벤트 시작 전에는 이벤트 시작까지 남은 시간이 나오고, 이벤트 중간에는 이벤트 종료 시각까지 않은 시간이 나온다. 이벤트 종료 후에는 Expired 메시지가 뜸.

<p id='count' style='font-size: 50px; font-weight: bold;'></p>

<script>
var countDownDate;
var check = function(){
   var now = new Date();
   now = now.getTime();
   if (now > new Date("Sep 5, 2020 00:00:00").getTime()){
       countDownDate = new Date("Sep 7, 2020 00:00:00").getTime();
  } else {
  countDownDate = new Date("Sep 5, 2020 00:00:00").getTime()
  }
}

var x = setInterval(function() {
   check()
   var now = new Date();
   now = now.getTime();
   var distance = countDownDate - now;
   var days = Math.floor(distance / (1000 * 60 * 60 * 24));
   var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
   var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
   var seconds = Math.floor((distance % (1000 * 60)) / 1000);
   document.getElementById("count").innerHTML = days + "d " + hours + "h "
   + minutes + "m " + seconds + "s ";
   if (distance < 0) {
       clearInterval(x);
       document.getElementById("count").innerHTML = "EXPIRED";
  }
}, 1000);
</script>


반응형

'Programming$ > Web Develop' 카테고리의 다른 글

[php] xss, sql injection 막기  (0) 2019.05.07
js 변수 값 php로 전달하기  (0) 2019.05.07
[html] form submit action 주의  (0) 2019.05.07
[JavaScript] removeAttribute()  (0) 2019.05.07
[JavaScript] practice 1  (0) 2019.03.06