Webのプログラミング言語であるJavaScriptで「ブラウザで動くカウントダウンタイマー」を作りました。
以下にアプリのリンクを貼っておきます。
この記事では、JavaScriptを使った「カウントダウンタイマーの作り方」をご紹介します。サンプルのコードを載せますので、アプリ開発の参考にしてみて下さい。
スポンサーリンク
アプリの仕様
アプリの完成画面の画像です。
アプリの仕様は以下です。
- 分と秒を設定できる。
- タイマーの一時停止、リセットができる。
- タイマーをブラウザのタイトルタブにも表示する。
タイマーをスタートすれば、他のWebページを閲覧していても動作し続けます。
HTMLのサンプルコード
HTMLは、要素を2つのグループに分けます。
- タイマーの表示部分
- ボタン部分
以下にHTMLのサンプルコードを貼ります。
<!-- タイマーの表示部分 -->
<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>
プログラムが最初に読み込まれた時には「00:00」と表示するようにHTMLに直書きしておきます。
JavaScriptのサンプルコード
JavaScriptのサンプルコードです。
順を追って説明していきます。最後にプログラムの全文を載せようと思います。
カウントダウンのしくみ
カウントダウンのしくみは、スタートボタンを押した時刻と現在の時刻との差を「経過時間」として、そこから設定時間を引くことで「残り時間」として表示しています。
経過時間 = スタートボタンを押した時刻 – 現在時刻
残り時間 = 設定時間 – 経過時間
現在時刻は、JavaScriptにあらかじめ定義されているDate.now() メソッドを使って取得します。これは、後ほど説明します。
設定時間の表示
「分」や「秒」ボタンが押された時に設定時間に加算する処理を作ります。
設定できるのは59分59秒までです。それを超えたら0になるように設定します。
タイマーの表示関数
// HTMLの表示領域の取得
const timer = document.getElementById("timer");
// ミリ秒を渡すと「分」や「秒」に直して画面に表示する
function updateTimer(milliSecond) {
let d = new Date(milliSecond);
let m = d.getMinutes(); // 分を取得
let s = d.getSeconds(); // 秒を取得
// 表示用に整形
m = ("0" + m).slice(-2);
s = ("0" + s).slice(-2);
// HTMLで表示する
timer.textContent = m + ":" + s;
}
「秒ボタン」が押された時の処理
「秒ボタン」が押されるたびに、変数 timeToCountDown に1000を加えます。1秒は1000ミリ秒なので1000を加えます。
以下サンプルコードです。
// HTMLのボタン要素を取得
const sec = document.getElementById("sec");
// 「秒ボタン」が押されたら設定時間に加算する
sec.addEventListener("click", function () {
// 1秒は1000ミリ秒なので1000を加算
timeToCountDown += 1000;
// 画面に表示する
updateTimer(timeToCountDown);
});
「分ボタン」が押された時の処理
「分ボタン」が押された時の処理も基本的には「秒ボタン」の場合と同じです。
違いは、加える値です。
1分 = 60秒 = 60000ミリ秒なので、変数 timeToCountDown に 60000 を加えます。
カウントダウン処理
スタートボタンが押された時の処理
スタートボタンが押されたらカウントダウンを開始します。（countDown関数を動かします）
プログラムの肝は、スタートボタンが押された時刻を取得することです。
ここで、Date.now() メソッドを使います。
// 「スタート」が押された時の処理
start.addEventListener('click', function () {
if (isRunning === false) {
isRunning = true;
// 表記をストップにする
start.textContent = 'ストップ';
startTime = Date.now();
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;
// 設定時間の初期化
timeToCountDown = 0;
// updateTimer(timeLeft);
updateTimer(timeLeft);
return;
}
// countDownを再帰的に呼び出す
updateTimer(timeLeft)
countDown();
}, 10);
}
プログラム全文
//即時関数
(function () {
var timer = document.getElementById('timer');
var min = document.getElementById('min');
var sec = document.getElementById('sec');
var reset = document.getElementById('reset');
var start = document.getElementById('start');
// スタートタイムを押した時の時間を入れる変数
var startTime;
// 残り時間を計算するための変数
var timeLeft;
// 現在時刻と表示形式を合わせるために * 1000
var timeToCountDown = 0;
// clearTimeoutメソッドを使いたいので、その時用に変数定義
var timerId;
// カウントダウンの状態を管理できるようにする
var isRunning = false;
// 残り時間を表示するために、ミリ秒を渡すと、分や秒に直してくれる関数
function updateTimer(t) {
// 引数として渡されたtでデータオブジェクトを作りたいので変数dという変数名で作ってみる
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;
}
function countDown() {
// 10ミリ秒後に実行する
timerId = setTimeout(function () {
// 残り時間 = カウントされる時間 - 現在時刻
timeLeft = timeToCountDown - (Date.now() - startTime);
// 残り時間が0になった時の処理
if (timeLeft < 0) {
isRunning = false;
start.textContent = 'スタート';
clearTimeout(timerId);
timeLeft = 0;
timeToCountDown = 0;
updateTimer(timeLeft);
return;
}
// countDownを再帰的に呼び出すために記述
updateTimer(timeLeft)
countDown();
}, 10);
}
// スタートを押したときの処理
start.addEventListener('click', function () {
if (isRunning === false) {
isRunning = true;
start.textContent = 'ストップ';
startTime = Date.now();
// カウントダウンの機能は再帰的に実行
countDown();
} else {
isRunning = false;
// 表記をStartに戻す
start.textContent = 'スタート';
// この時点のtimeLeftで更新してあげる
timeToCountDown = timeLeft;
// カウントを止めたいのでclearTimeoutする
clearTimeout(timerId);
}
});
// 分を押した時の処理
min.addEventListener('click', function () {
// カウントダウン中に設定時間を変更できないようにする
if (isRunning === true) {
return;
}
// 分 = 60秒なので
timeToCountDown += 60 * 1000;
// 60分、60秒を超えたら0にする
if (timeToCountDown >= 60 * 60 * 1000) {
timeToCountDown = 0;
}
// timeToCountDownをtimerに反映させたいのでupDatetimerを使う
updateTimer(timeToCountDown);
});
// 秒を押した時の処理
sec.addEventListener('click', function () {
// カウントダウン中に設定時間を変更できないようにする
if (isRunning === true) {
return;
}
// 1秒なので
timeToCountDown += 1000;
if (timeToCountDown >= 60 * 60 * 1000) {
timeToCountDown = 0;
}
// timeToCountDownをtimerに反映させたいのでupDatetimerを使う
updateTimer(timeToCountDown);
});
// リセットを押した時の処理
reset.addEventListener('click', function () {
// カウントダウン中に設定時間を変更できないようにする
if (isRunning === true) {
return;
}
timeToCountDown = 0;
// timeToCountDownをtimerに反映させたいのでupDatetimerを使う
updateTimer(timeToCountDown);
});
})();
以上です。ありがとうございました。
以下の記事では、JavaScript初心者におすすめの本をご紹介しています。よかったら読んでみて下さい。
JavaScriptの本を10冊読んだ中からおすすめを3つJavaScriptの本を10冊読んだ中からおすすめを3つ紹介します。...
スポンサーリンク
