JavaScriptのDateオブジェクトには、日付や時間を扱うためのメソッドが数多く用意されおり、使えるようになると、さまざまなプログラムに役立てることが可能です。
以前当ブログでは、Dateオブジェクトを使ったアナログ時計の作り方を紹介しましたが、今回はカウントダウンタイマーの作り方を解説します。
単に時間を取得するだけでなく、タイムリミットから逆算することが必要です。
基本的なDateオブジェクトの使い方や、時間の計算方法の理解を深めていきましょう。
デモ
今回は、日付が変わるまでの残り時間をカウントダウンさせるための実装をしていきます。
このようなカウントダウンタイマーは、ネットショッピングのセールの終了までのカウントダウンや、ニューイヤーやクリスマスまでのカウントダウンなどで良く見られます。
HTML・CSSの準備
まずはHTMLとCSSを用意します。
HTML
<!DOCTYPE html>
<html labg="en">
<head>
<meta chrset="utf-8" />
<title>Countdown Timer</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="countdown-container">
<h1>Countdown to end of today 🎉</h1>
<h2>You have ...</h2>
<div class="time-container">
<p class="time"><span id="hour"></span>hours</p>
<p class="time"><span id="min"></span>minutes</p>
<p class="time"><span id="sec"></span>seconds</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>CSS
html, body {
font-family: serif;
font-size: 16px;
}
.countdown-container {
margin: 5rem;
}
.time-container {
display: flex;
}
.time {
margin: .2rem;
background-color: lightpink;
border-radius: 1rem;
padding: 2rem;
}
#hour,#min,#sec {
font-size: 3rem;
margin-right: 1rem;
}HTML, CSS共にシンプルな作りとなっていますので、好みでテキストやスタイルをカスタマイズしてください。
JavaScriptでカウントダウンタイマーを実装
それでは、JavaScriptの解説をしていきます。
全体のコード
const hour = document.getElementById("hour");
const min = document.getElementById("min");
const sec = document.getElementById("sec");
function countdown(){
const now = new Date(); //現在時刻を取得
const tomorrow = new Date(now.getFullYear(),now.getMonth(),now.getDate()+1); //明日の0:00を取得
const diff = tomorrow.getTime() - now.getTime(); //時間の差を取得（ミリ秒）
//ミリ秒から単位を修正
const calcHour = Math.floor(diff / 1000 / 60 / 60);
const calcMin = Math.floor(diff / 1000 / 60) % 60;
const calcSec = Math.floor(diff / 1000) % 60;
//取得した時間を表示（2桁表示）
hour.innerHTML = calcHour < 10 ? '0' + calcHour : calcHour;
min.innerHTML = calcMin < 10 ? '0' + calcMin : calcMin;
sec.innerHTML = calcSec < 10 ? '0' + calcSec : calcSec;
}
countdown();
setInterval(countdown,1000);今回のカウントダウンタイマーの実装には、以下の時間の計算がポイントとなります。
・日付が変わる時刻（明日の0:00）から現在時刻を引く
・取得した時間の単位を時・分・秒に修正する
・時・分・秒を2桁表示する
上から順番にコードを見ていきましょう。
要素を取得する
まずは、必要な要素を取得します。
const hour = document.getElementById("hour");
const min = document.getElementById("min");
const sec = document.getElementById("sec");「document.getElementById」で、カウントダウンの時・分・秒を表示するための要素を取得します。
つぎに、カウントダウン機能を作るcountdown関数について機能別に解説していきます。
Dateオブジェクトでカウントダウンの時間を取得する
Dateオブジェクトを用いて、タイムリミットまでの残り時間を取得してみましょう。
const now = new Date();
const tomorrow = new Date(now.getFullYear(),now.getMonth(),now.getDate()+1);
const diff = tomorrow.getTime() - now.getTime();「new Data」は、現在時刻を取得するメソッドです。
さらに、「getFullYear」「getMonth」「getDate」「getTime」のインスタンスメソッドを用いることで「年」「月」「日」「日時（ミリ単位）」を取得することができます。
上記のことから、tomorrowでは明日の0:00を取得し、diffでは、明日の0:00から現在の時刻を引いた時刻、すなわち、残り時間を計算することができました。
取得した時間の単位を修正する
「getTime」は、日時をミリ単位の数値で返すため、上記で取得した残り時間の単位を修正する必要があります。
const calcHour = Math.floor(diff / 1000 / 60 / 60);
const calcMin = Math.floor(diff / 1000 / 60) % 60;
const calcSec = Math.floor(diff / 1000) % 60;数値の計算には、「Mathオブジェクト」が良く使われており、「Math.floorメソッド」を用いることで、値の小数点以下を切り捨てることが可能です。
1秒は1000ミリ秒となるため、diff を1000で割ると秒を出すことができ、60で割ると分、さらに60で割ると時に換算することができます。
時と分は、1〜59までの数値の表示が必要なため、60で剰余計算（%）し、余った数値のみ取得しています。
これで、取得した時間を時・分・秒に換算することができました。
時間を2桁表示させる
続いて、時・分・秒を2桁表示させていきます。
hour.innerHTML = calcHour < 10 ? '0' + calcHour : calcHour;
min.innerHTML = calcMin < 10 ? '0' + calcMin : calcMin;
sec.innerHTML = calcSec < 10 ? '0' + calcSec : calcSec;ここでは三項演算子を使用しています。
「条件 ? true : false」のように簡易的に条件式を記述することができます。
時・分・秒が10より小さければ頭に0を加え、そうでなければそのままの数値を表示させるための式です。
これで、数値が一桁になっても頭に0が付くようになり、いつでも2桁表示されるようになりました。
もう1つ「String.prototype.padStart()」を使う方法も紹介します。
hour.innerHTML = String(calcHour).padStart(2,"0");
min.innerHTML = String(calcMin).padStart(2,"0");
sec.innerHTML = String(calcSec).padStart(2,"0");「Stringオブジェクト」は、時間を文字列に変換し、「padStartメソッド」は、文字列を指定した長さにするために文字列を埋める役割があります。
「podStart(2, “0”)」と記述することで、2桁にならなければ、左側から0を足すことができます。
このように指定した長さにするために0で文字列を埋めることを「ゼロパディング」と言います。
短い記述かつ意味合い的にも分かりやすいため、ゼロパディングが必要なときは、活用してみてください。
カウントダウンタイマーを実行する
さいごに、カウントダウンタイマーを実行させましょう。
countdown();
setInterval(countdown,1000);ページがロードされた後すぐにカウントダウンを開始させたいため、関数を呼び出します。
さらに、「setInterval」で1000ミリ秒ごとに関数を呼び出します。
これで1秒ごとに時間がカウントされるようになりました。
以上ですべての実装が完了です。
まとめ
今回はJavaScriptでのカウントダウンタイマーの作り方を解説してきました。
「Dateオブジェクト」での時刻の取得や「Math.floorメソッド」で時刻の単位を修正、「padStartメソッド」で時間を2桁表示する方法を扱いました。
時間の取得や計算、表示方法を身に付けると、数値を取り扱うプログラミングにおいて生かすことができますので、積極的に取り入れてみてください。
JavaScriptの基本をおさらい
