【JavaScript】指定日時までの残り時間をリアルタイムで表示する

Web制作

• JavaScript

概要

指定日時までの残り時間を表示する。

実装

残り

残り

コード

HTML

<p>残り<span class="countdown" data-date="2019-12-03 04:56"></span></p>
<p>残り<span class="countdown" data-date="2020-09-08 12:30"></span></p>

JavaScript

</body>直前に貼り付け。

<script>
window.addEventListener('load',()=>{
  Countdown();
})

const Countdown = function(){
  const cd_areas = document.getElementsByClassName('countdown');
  [...cd_areas].forEach(cd_area=>{
    const target_unix = new Date(cd_area.dataset.date)/1000;
    setInterval(()=>{
      const now_unix = Math.floor(new Date()/1000);
      let sec = target_unix-now_unix;
      let cd_text = '';
      if(sec>=86400){
        cd_text += Math.floor(sec/86400)+'日';
        sec = sec%86400;
      }
      if(sec>=3600){
        cd_text += td(Math.floor(sec/3600))+'時間';
        sec = sec%3600;
      }else{
        cd_text += '00時間';
      }
      if(sec>=60){
        cd_text += td(Math.floor(sec/60))+'分';
        sec = sec%60;
      }else{
        cd_text += '00分';
      }
      cd_text += td(sec)+'秒';
      cd_area.textContent = cd_text;
    },1000);
  });

  function td(x){
    if(x<10){
      return '0'+x;
    }else{
      return x;
    }
  }
}
</script>