【JavaScript入門】カウントダウンタイマー

はじめに

ECサイトを作成する際、
・期間限定のセールで残り時間を表示したい
ソーシャルゲームを作成する際、
・限定ガチャやボスが逃げるまでの残り時間を表示したい
と思うことあると思います。
今回は、そんな機能についてご紹介します。

方法

今回は、jQueryを使用して作成します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

カウントダウンタイマー機能を作成します。

JavaScript

<script>
  var timerId;
  // カウントダウンの終了日
  var endDateTime = new Date("2021/07/23 20:00:00");

  // カウントダウン機能
  function countDownTimer() {
    var startDateTime = new Date();
    var remaining = endDateTime - startDateTime;

    // カウントダウン後、id="contents"の部分の表示を変更 
    if (remaining < 0) {
      $("#contents").html('東京オリンピック開催中です');
      // 繰り返し動作を停止(setIntervalで設定したタイマーをクリア)
      clearInterval(timerId);
      return 
    }

    // 1日の秒数
    var daySeconds = 24 * 60 * 60 * 1000;

    // 残り日数
    var remainingDays = Math.floor(remaining / daySeconds);
    // 残り時間
    var remainingHrs = Math.floor((remaining % daySeconds) / (60 * 60 * 1000));
    // 残り分数
    var remainingMin = Math.floor((remaining % daySeconds) / (60 * 1000)) % 60;
    // 残り秒数
    var remainingSec = Math.floor((remaining % daySeconds) / 1000) % 60 % 60;

    $("#TimeRemaining").text(remainingDays + '日' + remainingHrs + '時間' + remainingMin + '分' + remainingSec + '秒');
  }

  // 一定時間ごとに関数countDownTimer()を呼び出す
  $(function() {
    // 1秒刻みで表示させたいので、1000以下に設定  
    timerId = setInterval('countDownTimer()',1000);
  });
</script>

html

<div id="contents">
  <p>東京オリンピックまで</p>
  <p id="TimeRemaining"></p>
</div>

これで機能としては完成です。
あとは、見栄え良くご自身でデザインしましょう。

参考

東京オリンピック
jQuery
Math.floor
Javascriptのタイマー処理　setIntervalとsetTimeout