19行のコードで簡単に作成できるJavaScriptカウントダウンタイマー

19行のコードで簡単に作成できるJavaScriptカウントダウンタイマー

カウントダウンタイマーを簡単に作成

JavaScriptカウントダウンタイマーは本格的に作ると計算が多く、少し長めのコードを書く必要がある。

しかし、getUTCDate()などを利用すれば一般的なカウントダウンタイマーよりも簡単に作成することができる。

作成手順

まずDAYSTARTとDAYENDの変数に開始日時および終了日時を入れる。INTERVAL = 1000の変数は更新時間(1秒)として使用している。

サンプルではDAYSTARTがnew Date('2017/03/28 00:00:00')になっているが通常のタイマーであればnew Date()を指定して現在の時刻を取得すれば良い。

以上の変数を指定したらnew Date(+DAYEND - DAYSTART + INTERVAL)で残り時間を計算する。

var DAYSTART = new Date('2017/03/28 00:00:00');
var DAYEND   = new Date('2017/04/01 00:00:00');
var INTERVAL = 1000;
var calc = new Date(+DAYEND - DAYSTART + INTERVAL);

次に残り時間(カウントダウンタイマー)を表示するための関数を作成する。

function countdownTimer() {
  var addZero = function(n) { return ('0' + n).slice(-2); }
  if (+new Date(calc) <= INTERVAL) {
    document.getElementById('result').textContent = '終了しました。';
  } else {
    calc = new Date(+new Date(calc) - INTERVAL);
    var date = calc.getUTCDate() - 1 ? calc.getUTCDate() - 1 + '日' : '';
    var hours = calc.getUTCHours() ? calc.getUTCHours() + '時間' : '';
    var minutes = addZero(calc.getUTCMinutes()) + '分';
    var seconds = addZero(calc.getUTCSeconds()) + '秒';
    document.getElementById('result').textContent = date + hours + minutes + seconds;
  }
}

基本的にカウントダウンタイマーは分や秒は1桁の際は0を追加して01のように表示するため0を追加するための関数(addZero)を作成しておく。

これがないと秒の部分が1桁や2桁に切り替わったときに表示がガタガタしてしまい、見栄えが悪くなってしまう。

if (+new Date(calc) <= INTERVAL)は残り時間が1秒以下になったときの処理となっている。サンプルでは「終了しました。」という文言を表示している。

残り時間がまだ残っている場合はelseの部分で日、時間、分、秒をgetUTCDate()、getUTCHours()、getUTCMinutes()、getUTCSeconds()で取得して表示している。

最後に以下のコードを追加してカウントダウンタイマーを実行する。

countdownTimer();
setInterval(function() { countdownTimer() }, INTERVAL);

JavaScriptカウントダウンタイマーのサンプル

1日を24時間として計算する

残り2日10時間のときに58時間と表示したい場合はdateに24をかけてhoursのほうに足す。

var date = calc.getUTCDate() - 1;
var hours = date * 24 + calc.getUTCHours() ? date * 24 + calc.getUTCHours() + '時間' : '';
var minutes = addZero(calc.getUTCMinutes()) + '分';
var seconds = addZero(calc.getUTCSeconds()) + '秒';
document.getElementById('result').textContent = hours + minutes + seconds;

使用時の注意事項

このコードは初心者でも使用できるようになるべく短く簡単に作成したものなのでclearIntervalの処理を省いてある。

また、簡略化のためcalc.getUTCDate()を使用しているため1ヶ月以上の期間があるものには使用できない。※

※正確にはcalc.getUTCMonth()やcalc.getUTCFullYear()が1以上のもの。