JavaScriptとHTMLで、ブラウザで動くカウントダウンタイマーを作りました。
この記事では、JavaScriptを用いた「タイマーアプリの作り方」をご紹介します。
仕様について
- 分と秒を設定できる。
- タイマーをタブにも表示する。
タイマーを起動させると、他のWebページを閲覧していても、動作し続けます。
スマホでも使えます。
HTML
HTMLのコードです。
要素は、大きく2つに分けました。
- タイマー表示部(
div id="timer") - コントロールボタン部(
div id ="controls")
※コントロールボタン部とは、分や秒の設定ボタンと、スタート・ストップボタンのことです。
<div id="timer">00:00</div>
<div id="controls">
<div class="box">
<button id="min">分</button>
<button id="sec">秒</button>
</div>
<div class="box">
<button id="start">スタート</button>
<button id="reset">リセット</button>
</div>
</div>
JavaScript
カウントダウンタイマーとは、残り時間を表示するタイマーです。
今回のプログラムのしくみは、スタートボタンを押した時刻と、現在の時刻との差を、設定した時間から引き算することで、残り時間として表示しています。
残り時間 = 設定した時間 – (スタートボタンを押した時間 – 現在時刻)
現在時刻は、JavaScriptにあらかじめ設定されている Date.now() メソッドを使って取得します。
Date.now() メソッドは、経過時間をミリ秒単位で返します。ここは「そういうもんだ。」で進みましょう。
カウントダウンの時間設定
カウントダウンの初期値を設定するために、「分」や「秒」が押された時に、タイマーを加算する処理を作ります。
設定できるのは59分59秒まで。それを超えたら0になるように設定します。
「秒」が押された時の処理
「秒」が押されるたびに、変数 timeToCountDown に1000を加えます。
1秒 = 1000ミリ秒
// 秒が押されるたびに、設定時間を加算する
sec.addEventListener('click', function () {
// カウントダウン中は、設定を変更できないようにする
if (isRunning === true) {
return;
}
// 1秒は1000ミリ秒なので
timeToCountDown += 1000;
if (timeToCountDown >= 60 * 60 * 1000) {
timeToCountDown = 0;
}
// timeToCountDownをtimerに反映させたいのでupDatetimerを使う
updateTimer(timeToCountDown);
});
「分」が押された時の処理
「分」が押されるたびに、変数 timeToCountDown に1000 * 60 を加えます。
1分 = 60秒 = 60000ミリ秒
// 「分」を押した時の処理
min.addEventListener('click', function () {
// カウントダウン中に設定時間を変更できないようにする
if (isRunning === true) {
return;
}
// 分 = 60秒なので
timeToCountDown += 60 * 1000;
// 60分を超えたら0にする
if (timeToCountDown >= 60 * 60 * 1000) {
timeToCountDown = 0;
}
// timeToCountDownをtimerに反映させたいので、upDatetimerを使う
updateTimer(timeToCountDown);
});
カウントダウン
スタートボタン
スタートボタンが押されたら、カウントダウンを開始します（countDown関数を動かします）
肝は、スタートボタンが押された時刻を取得することです。
Date.now() メソッドの登場です。
これと、現在時刻とを比較することで、カウントダウンを表すからです。
// 「スタート」が押された時の処理
start.addEventListener('click', function () {
if (isRunning === false) {
isRunning = true;
start.textContent = 'ストップ';
startTime = Date.now();
// カウントダウンの機能は再帰的に実行したいので、countDown関数を入れておく
countDown();
} else {
isRunning = false;
// 表記をStartに戻す
start.textContent = 'スタート';
// この時点のtimeLeftで更新してあげる
timeToCountDown = timeLeft;
// カウントを止めたいのでclearTimeoutする
clearTimeout(timerId);
}
});
countDown関数
スタートボタンが押された時に動く関数です。
ここで、残り時間を計算して、表示します。
また、カウントダウンを繰り返し行うために、再帰的に呼び出すようにします。
function countDown() {
// setTimeoutを使って、10ミリ秒後(0.01秒後)に実行するようにする
timerId = setTimeout(function () {
// 残り時間 = カウントされる時間 - （現在時刻 - スタートボタンを押した時間）
timeLeft = timeToCountDown - (Date.now() - startTime);
// 残り時間が0になった時の処理
if (timeLeft < 0) {
isRunning = false;
start.textContent = 'スタート';
clearTimeout(timerId);
timeLeft = 0;
// カウントをリスタートした際にデフォ値の4秒にならないようにする
timeToCountDown = 0;
// updateTimer(timeLeft);
updateTimer(timeLeft);
return;
}
// countDownを再帰的に呼び出すために記述
updateTimer(timeLeft)
countDown();
}, 10);
}
残り時間を表示するupdateTimer関数
画面表示するために、ミリ秒を、分や秒に直すための関数です。
引数として、残り時間を渡します。
HTMLを取得して、内容を書き換えます。
// 残り時間を表示するために、ミリ秒を渡すと、「分」や「秒」に直してくれる関数
function updateTimer(t) {
// 引数として渡されたtでデータオブジェクトを作る
var d = new Date(t);
var m = d.getMinutes();
var s = d.getSeconds();
m = ('0' + m).slice(-2);
s = ('0' + s).slice(-2);
timer.textContent = m + ':' + s;
// タブにタイマーを表示する
var title = timer.textContent = m + ':' + s;;
document.title = title;
}
以上です。ありがとうございました。
JavaScriptをもっと学びたい初心者におすすめの本をご紹介しています。
