はじめに
カウントダウンタイマーが必要になったのでめも。
色々なタイプのものがありますが今回は、
- 本日のn時までをカウントダウン
- ページが表示されてからn時間のカウントダウンをスタート
DEMO
まずはどのような動きになるかデモをご覧ください。
DEMO
本日のn時までをカウントダウン
▼HTML
<div id="timer"></div>
▼JavaScript
'use strict';
var endDate = new Date(); // 現在時刻を取得
endDate.setHours(24, 0, 0); // カウントダウン終了時刻を本日の24時にセット
var interval = 1000;
function countdownTimer(){
var nowDate = new Date(); // 現在時刻を取得
var period = endDate - nowDate; // endDateからnowDateを引いて目標時刻までの差分を取得
var addZero = function(n){return('0'+n).slice(-2);} // 分と秒が一桁になったときに「0」をつける
if(period >= 0) {
var hour = Math.floor(period / (1000 * 60 * 60)); // periodをそれぞれの単位に合わせる
period -= (hour *(1000 * 60 * 60));
var minutes = Math.floor(period / (1000 * 60));
period -= (minutes * (1000 * 60));
var second = Math.floor(period / 1000);
var insert = "";
insert += '<span class="h">' + hour + ':' + '<span>'; // spanをつけてinsertに入れてく
insert += '<span class="m">' + addZero(minutes) +':' + '<span>';
insert += '<span class="s">' + addZero(second) + '<span>';
document.getElementById('timer').innerHTML = insert; // #timerの中に表示
setTimeout(countdownTimer,1000); // setTimeout()でcountdownTimerを呼び出す
}
else {
var insert = "";
var text = "Finish";
insert += '<span>' + text + '<span>';
document.getElementById('timer').innerHTML = insert; //「Finish」を表示
}
}
countdownTimer();
ページが表示されてからn時間のカウントダウンをスタートするタイマー
先ほどのとあまり変わりわないので、変更箇所のみコメントアウト。
こちらはページが表示されてから１時間のカウントダウンがスタートします。
<div id="timer"></div>
▼JavaScript
'use strict';
var endDate = new Date();
var endDateAfter = new Date(endDate.getTime() + (1000 * 60 * 60 * 1)); // 取得した現在時刻を.getTime()でミリ秒にして1時間を足す
var interval = 1000;
function countdownTimer(){
var nowDate = new Date();
var period = endDateAfter - nowDate; // endDateAfterからnowDateを引いて目標時刻までの差分を取得
var addZero = function(n){return('0'+n).slice(-2);}
if(period >= 0) {
var hour = Math.floor(period / (1000 * 60 * 60));
period -= (hour *(1000 * 60 * 60));
var minutes = Math.floor(period / (1000 * 60));
period -= (minutes * (1000 * 60));
var second = Math.floor(period / 1000);
var insert = "";
insert += '<span class="h">' + hour + ':' + '</span>';
insert += '<span class="m">' + addZero(minutes) +':' + '<span>';
insert += '<span class="s">' + addZero(second) + '<span>';
document.getElementById('timer').innerHTML = insert;
setTimeout(countdownTimer,1000);
}
else {
var insert = "";
var text = "Finish";
insert += '<span>' + text + '<span>';
document.getElementById('timer').innerHTML = insert;
}
}
countdownTimer();
さいごに
endDateに取得させる日付をvar endDate = new Date('2020/01/01 00:00:00');などにしてあげれば長めのカウントダウンタイマーにもなります。
表示される数字、文字共にspanで括ってあるので細かい装飾ができるあたりもいいですね。
また、ページを開いてから一定時間後になんかの処理をさせたい時とかにも応用して使えそうです。