...

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

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

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

カウントダウンしてくれるタイマーを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を書き換えています

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で爆速でカウントダウンタイマーを実装する方法でした。
少し算数力が必要なだけで、後は単純なものなのでブログ主でもすんなり理解できました。

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

参考になったらシェアしよう

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA