くるみ
- 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を書いてあげれば…
今日が終わるまで
あと時間分秒
以上で完成です。
くるみ
まとめ
参考になれば幸いです!では⸝⸝- ̫ -⸝⸝
エンジニア志望の学生です。
サイトいつも拝見させていただいております。
タイマー機能の実装がとてもわかりやすく勉強になりました。
ひとつ質問がありまして、
ポップアップ機能と組み合わせたいと考えて試行錯誤しているのですがうまくいかず…
WordPressサイトで他サイトで紹介されているショートコードと合わせているのですが、
setTimeoutが機能していないのかポップアップ表示後にタイマーが固定化されてしまう現象が起きています。
PHP周りはあまり詳しくなく、なにかアドバイスをいただけたらと思いコメントさせていただきました。
使用しているポップアップコードはこちらです。
https://tart.co.jp/wordpress-shortcode-popup/