day = math.floor

1000*60*60*24이렇게 쓰기 귀찮아서

그냥..짜봤어요..누군가 필요할 수도 있을거란 생각에 공유드립니다

https://codepen.io/derrickmckeown/pen/KLDhk?css-preprocessor=sass

위 코드펜 참고해서 만들엇는데 시와 분이 반올림이 안되어있어서

수정해놨어요

마크업도 별도로해놨으니..CSS는 꾸미시면 되실거라..

[code]

<style>
    @import url(https://fonts.googleapis.com/css?family=Lato:100,400);
    #the-final-countdown {
      background: #333;
      font-family: 'Lato', sans-serif;
      text-align: center;
      color: #eee;
      text-shadow: 1px 1px 5px black;
      padding: 1rem 0;
      font-size: 3rem;
      border: 1px solid #000;
    }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="the-final-countdown">
  <p></p>
</div>

<script>
    setInterval(function time(){
      //시간 초기화
      var d = new Date();
      var hours = 24 - d.getHours();
      var min = 60 - d.getMinutes();
      var sec = 60 - d.getSeconds();

      //분이 있으면 시 반올림
      if(min =='00'){
          hours = 24 - d.getHours();
        }else{
          hours = 23 - d.getHours();
      }
      //초가 있으면 분 반올림        
      if(sec =='00'){
          min = 60 - d.getMinutes();
        }else{
          min = 59 - d.getMinutes();
      }

      //1자리수라면 0을 붙혀라
      if((hours + '').length == 1){
        hours = '0' + hours;
      }
      if((min + '').length == 1){
        min = '0' + min;
      }
      if((sec + '').length == 1){
        sec = '0' + sec;
      }

      //날짜를 표기하고 딜레이는 1초(1000)마다 바뀌겠금
      jQuery('#the-final-countdown p').html
          ('<span class="t_hour">'+hours+'</span>'+
           '<span class="t_colon">:</span>'+
           '<span class="t_min">'+min+'</span>'+
           '<span class="t_colon">:</span>'+
           '<span class="t_sec">'+sec+'</span>')
    }, 1000);
</script>

[/code]