JavaScriptで当日の指定時間までカウントダウンさせる

試作したのでメモとして。タイマー系はあまり作ったことがないのと、Dateオブジェクトも最近触っていなかったのとで結構時間がかかりました。

実現したいこと

• JSを使って、当日の指定時間までカウントダウンを続ける
• IEなど多少レガシーな環境でも動くように作る

現在この記事に設定しているので、開発者ツールでコンソールをひらけば確認できると思います。18時までのカウントダウンで、他に少し記述を変更していますが、動作部分は以降のサンプルコードそのままです。

サンプルコード

//時間を指定
var tH = 18;
//分を指定
var tM = 0;
//秒を指定
var tS = 0;

var timer = (function(){
  // 指定時間までの差分を取得
  var getDeffer = function(){
    var today = new Date();
    var todayMilliSec = today.getTime();
    var nextDay = today.getDate() + 1 ;
    var targetTime = new Date(today.getFullYear(), today.getMonth(), today.getDate(), tH, tM, tS);
    var targetTimeMilliSec = targetTime.getTime();
    var deff = targetTimeMilliSec - todayMilliSec;
    return deff;
  }
  // 1秒おきにカウントダウン
  var display = setInterval(function(){
    var ms = getDeffer();
    var flag = true;
    if (ms > 0) {
      var t = Math.round(ms / 1000);
      var h = Math.floor(t / 3600);
      var m = Math.floor((t - h * 3600) / 60);
      var s = Math.floor(t - h * 3600 - m * 60);
      console.log('終了まで ' + addZero(h) + '時間' + addZero(m) + '分' + addZero(s) + '秒');
      if(flag === false){
        flag = true;
      }
    } else {
      if(flag === true){
        console.log('終了しました');
        flag = false;
      }
    }
  }, 1000);

  var addZero = function (num) {
    return ('0' + num).slice(-2);
  }
})();

ミリ秒換算で差分を取得し、その差分を時分秒に変換して表示という単純な流れです。

動作チェック方法

//var today = new Date()を以下のように変える
//以下であれば、17時間31分後を現時刻として扱う
var today = new Date(+new Date() + (17 * 60 * 60 * 1000 + 31 * 60 * 1000));

設定日時や日付変更時に意図した動作になっているかを確認する方法として「ただ待つ」というのは採用できませんので(リアルタイムに確認するのが最も正確な確認だとは思いますが)、現在の時刻をずらすことで確認します。

JSの作り方によっては方法が変わると思いますが当ページのサンプルであれば、上記のようにしてミリ秒換算で時間を追加すれば「2時間後」のような時間単位ではなく「2時間20分20秒後」などの確認ができます。

参考サイト

• Date – JavaScript | MDN
• JavaScript – ミリ秒から時分秒への変換｜teratail
• Javascriptでセールに最適なカウントダウンタイマーを設置する | ネットショップ語り

結び

古い作り方のような気はしますがとりあえず動いたので。