【JavaScript】爆速でカウントダウンタイマーを実装する

やりたいこと

このような、今日が終わるまでの時間をカウントダウンしてくれるタイマーを作りたい。

結論

今日が終わるまであと <br />
<span class="hour"></span>時間 <span class="min"></span>分
<span class="sec"></span>秒

const elmHour = document.querySelector(".hour");
const elmMin = document.querySelector(".min");
const elmSec = document.querySelector(".sec");

const rewriteTime = () => {
  const now = new Date();
  const tomorrow = new Date(
    now.getFullYear(),
    now.getMonth(),
    now.getDate() + 1
  );
  const differ = tomorrow.getTime() - now.getTime();

  const sec = Math.floor(differ / 1000) % 60;
  const min = Math.floor(differ / 1000 / 60) % 60;
  const hour = Math.floor(differ / 1000 / 60 / 60);

  elmHour.textContent = String(hour).padStart(2, "0");
  elmMin.textContent = String(min).padStart(2, "0");
  elmSec.textContent = String(sec).padStart(2, "0");
};

setInterval(rewriteTime, 1000);

実装方法

1. HTMLで時間を表示

今日が終わるまであと <br />
<span class="hour"></span>時間 <span class="min"></span>分
<span class="sec"></span>秒

それぞれに適当なclassも付与しておきます。

2. Dateオブジェクトで明日までの秒数を出す

const now = new Date(); //今の時間
const tomorrow = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1); //明日の0:00
const differ = tomorrow.getTime() - now.getTime(); //明日まであと何ミリ秒か

まず現在の時間を取得するためにDateオブジェクトをnowに代入。そして引数で明日の0:00に設定したDateオブジェクトをtomorrowに代入。

そしてそれらの差が「明日まであと何ミリ秒なのか」というわけです。

3. ミリ秒を秒・分・時に直す

const sec = Math.floor(differ / 1000) % 60;
const min = Math.floor(differ / 1000 / 60) % 60;
const hour = Math.floor(differ / 1000 / 60 / 60);

「秒」は「分」の余りなので、differを60（1分）で割った余りが秒になります。

differ / 1000 / 60で「分」が求められていますが、それは「時」を考慮してない「分」なのでもう一作業。

今回表示したい「分」は「時」の余りなので、「秒」を60（1時間）で割った余りが「分」になるわけですね。

「時」も同じ要領でdiffer / 1000 / 60 / 60で求められます。

あとはそれぞれfloorメソッドで小数点以下を切り捨ててあげればOK。

4. HTMLを書き換える

document.querySelector(".hour").textContent = String(hour).padStart(2, "0");
document.querySelector(".min").textContent = String(min).padStart(2, "0");
document.querySelector(".sec").textContent = String(sec).padStart(2, "0");

padStartメソッドで常に2文字になるように前に0を付けてもらいます。あとこのメソッドを使うために文字列に変換しています。

あとはtextContentで時間の部分の表示を書き換えればOK。

5. 1秒ごとに繰り返す

setInterval(rewriteTime, 1000);

先ほどまでの処理を関数にまとめ、setIntervalメソッドで1秒ごとに実行してあげれば完成 🎉