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

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

くるみ

よくさ、特設サイトとかに「〇日まで△時間」的なのあるじゃん?あれをjsで作りたいたんだな
ということで今回は

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

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

getTime()で返されるのはミリ秒だから気を付けてね

くるみ

参考 日付処理を使い倒す! JavaScriptのDate活用法を徹底解説Samurai Blog

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

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を書き換えれば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で爆速でカウントダウンタイマーを実装する方法でした。

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

コメントを残す