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

どうもおはようポテト(@ohayoupoteto22)です。

ということで今回はJavaScriptでカウントダウンタイマーを実装してみようと思います。

こういうやつですこういうやつ↓

(お手元の時計の秒針と見比べてみて下さい。多分合ってるはずです。多分。)

よくイベント告知のサイト等で見かけますよね。このタイマー、仕組みはとても単純で簡単に実装することができます！

ということで今回は

という方に向けて「JavaScriptでカウントダウンタイマーを実装する方法」をまとめました。

参考になれば幸いです⸝⸝- ̫ -⸝⸝

カウントダウンタイマーを作ってみる

htmlはこんな感じ

今回は「今日が終わるまであと〇時間□分△秒」というタイマーを作ってみます

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

htmlは以上のようにしました。

JavaScriptで要素を取得して書き換えるために、時間・分・秒それぞれを表示するidの異なった<span>を用意しておきます

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に代入。

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

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

const sec=Math.floor(differ/1000)%60;//ミリ秒を秒に直してから
const min=Math.floor(differ/1000/60)%60;//1時間=60分だからね
const hour=Math.floor(differ/1000/60/60);

“秒”というのは”分”になれなかった出来損ないの余りなので、differを60(1分)で割った余りが秒になるわけですね(説明が超絶下手)

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

今回表示したい”分”というのは”時”になれなかった出来損ないの余りなので、”秒”を60(1時間)で割った余りが”分”になるわけですね(説明が絶望的に下手)

“時”も同じ要領で「differ/1000/60/60」で求められます。
(※今回は”時”が25以上になることは無い為、24の剰余を出す必要はありません)

あとはそれぞれfloorメソッドで小数点以下を切り捨てています。

htmlを書き換える

document.getElementById("hour").textContent=String(hour).padStart(2,"0"); //一桁になった時0がつくように
document.getElementById("min").textContent=String(min).padStart(2,"0")
document.getElementById("sec").textContent=String(sec).padStart(2,"0")

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

あとは「textContent」を使ってhtmlを書き換えています

1秒ごとに繰り返す

さあ、後は1秒ごとに今までの処理を繰り返したいので…このメソッドを使います。

setTimeout(繰り返したい関数,何秒毎に繰り返すか);

setTimeoutメソッド。名前がカッコいい(小並感)

今までの処理を関数countdownにぶち込んで、setTimeoutで1秒毎に呼び出してあげます。

function countdown(){
const now=new Date();//今の時間
const tomorrow=new Date(now.getFullYear(),now.getMonth(),now.getDate()+1);//明日の0:00
const differ=tomorrow.getTime()-now.getTime();//あと何秒か計算


const sec=Math.floor(differ/1000)%60;//ミリ秒を秒に直してから
const min=Math.floor(differ/1000/60)%60;//1時間=60分だからね
const hour=Math.floor(differ/1000/60/60);


document.getElementById("hour").textContent=String(hour).padStart(2,"0"); //一桁になった時0がつくように
document.getElementById("min").textContent=String(min).padStart(2,"0")
document.getElementById("sec").textContent=String(sec).padStart(2,"0")
setTimeout(countdown,1000);//1秒毎に繰り返す
}
countdown();

これが全体となります。

あとは適宜CSSを書いてあげれば完成。

結果

さあ実行してみると…

最後に

以上となります。

少し算数力が必要なだけで、後は単純なものなのでブログ主でもすんなり理解できました。

ソロモンMV実装までのカウントダウンタイマーを作りました。

なにこれ pic.twitter.com/FVsyCNNEzf

— おはようポテト @サイト管理人 (@ohayoupoteto22) April 5, 2020