くるみ
- JavaScriptでカウントダウンタイマーを作りたい
- 難しいことはいいからとりあえず大まかな作り方を知りたい
という方に向けて「JavaScriptでカウントダウンタイマーを実装する方法」をまとめました。
参考になれば幸いです⸝⸝- ̫ -⸝⸝
お品書き
カウントダウンタイマーの完成イメージ
1分経つまで
あと秒
こんな感じにカウントダウンしてくれるタイマーを作ります。
上の例では秒しか表示されていませんが今回は「今日が終わるまであと〇時間□分△秒」という仕様にします。
くるみ
JavaScriptでカウントダウンタイマーを実装する方法
時間を表示させるhtml要素を用意
<p class="until">今日が終わるまで</p>
<p class="timer">あと
<span id="hour"></span>時間
<span id="min"></span>分
<span id="sec"></span>秒
</p>まず時間を表示させる要素を用意。
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」で求められます。
あとはそれぞれ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を書き換えればOK。
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を書いてあげれば…
今日が終わるまで
あと時間分秒
以上で完成です。
くるみ
まとめ
以上、JavaScriptで爆速でカウントダウンタイマーを実装する方法でした。参考になれば幸いです！では⸝⸝- ̫ -⸝⸝
