2017年3月29日(水)2019年5月21日(火) 投稿者: iwbjp

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

カウントダウンタイマーを簡単に作成
作成手順
1日を24時間として計算する
使用時の注意事項

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

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(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;