sugulogの日記

JavaScriptとタイマー!様々なカウントダウンを実装しよう!!

スポンサードリンク

f:id:sugulog:20210213144559p:plain
こんにちは、すぐるです!

sugulogをお読みいただきありがとうございます!!

このブログは、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準に書いています。

少しでもお役に立てれば幸いです。

 

今回は、JavaScriptとタイマーということで

  •  様々なカウントダウンの実装

について簡単に解説します!!

その為このブログを読むことで、カウントダウンを実装することができるようになるのはもちろん、様々なパターンにも対応できるようになります。

是非最後までご愛読ください。

 

今回は、

  • ページ読み込み時のカウントダウン

  • setIntervalを使用したカウントダウン

の順で解説していきます。

では早速、みていきましょう!!

・ページ読み込み時のカウントダウン

まずはHTMLでカウントダウン表示箇所を作成します。

f:id:sugulog:20210213004629p:plain

今回はページが読み込まれた時に10秒のカウントダウンを実行し、カウントダウンが0秒以下になった時に停止します。

次にJavaScriptの記述です。

f:id:sugulog:20210213011225p:plain

実装のポイントとしては DateオブジェクトのgetTimeメソッドを使い現在の時間と10秒後の時間との差分を使いカウントダウンを行います。

まず定数limitでは関数の外でgetTimeメソッドを使い現在時刻を取得し、10秒を足すことにより10秒後の時間を定義しています。

この際getTimeメソッドはミリ秒単位での取得となるため10×1000で10秒を定義することができます。

そしてcountdown関数を実行しています。

countdown関数ではまずgetTimeメソッドで現在の時間を取得し、関数外で定義した10秒後のlimit定数との差分を求めています。

またinnerTextで表示したい箇所にその差分を表示させています。

その際にミリ秒単位の表示を秒単位に直すため1000で割り、toFixedで小数点以下の表示桁数を指定しています。

後はこの処理をrequestAnimationFrameを使い繰り返しています。

繰り返すことにより関数内の現在の時間は随時更新され、関数外で定義した10秒後の時間との差分が縮まることによりカウントダウンを行っています。

また関数内のif文で差分が0以下になった際にreturn文を使い処理を終了させ、戻り値としてinnerTextで0を表示させています。

では実際に動きを確認してみましょう!!

f:id:sugulog:20210213142034g:plain

10秒のカウントダウンが行われていることが確認できますね。

今回ブログではGif動画で表示しているためカウントが早いですが、実際はしっかりと10秒でカウントダウンされます。

setIntervalを使用したカウントダウン

setIntervalは第二引数にミリ秒単位で指定された間隔で第一引数の関数の処理を行うメソッドです。

その中で今回はボタンが押された際に10秒のカウントダウン行う処理を実装します。

まずはHTMLでカウントダウン表示箇所とボタンを作成します。

f:id:sugulog:20210407213806p:plain

次にJavaScriptを以下のように記述しました。

またカウントダウンの表示箇所は1箇所のみなので、ボタン連打による表示箇所の重複防止も実装しています。

f:id:sugulog:20210407223011p:plain

まずは実装の中でbutton要素を何度も使用するので取得し定数に代入しています。

その後ボタンがクリックされた時の処理としては、10秒を定義しボタンがクリックされた時点での時間を取得しています。

またbutton要素にstyleとしてdisplay:noneを与えることで非表示にし、ボタンの連打を防いでいます。

そしてsetIntervalを実行しています。

今回のsetIntervalは第二引数として1000(1秒)を指定しています。

setIntervalの中で行われる処理としてまずは現在の時間を取得しています。

そして先程のクリックされた時の時間とsetInterval中で繰り返し取得される現在の時間との差分を求め、さらに定義した10秒から求めた差分を引くことで10秒のカウントダウンを実装しています。

後は表示の仕方としてMath.ceilの中で秒単位に変換し数値以上の最小整数を定義し、定数textを定義しinnerHTMLで表示していく流れになります。

またif文では0秒以下になった時の処理としてclearIntervalでsetIntervalを終了させ定数textをカウントダウン前の文言に戻し、styleでdisplay:blockを与えることでボタンを表示させ全てをカウントダウン前の状態に戻しています。

では実際に動きを見てみましょう。

f:id:sugulog:20210408214444g:plain

こちらもGif動画で表示しているためカウントが早いですが、10秒でカウントダウンされているのが確認できますね!

そしてカウントダウン後は元の状態に戻っているのも確認できますね!!

 

以上、今回のブログでした。

カウントダウンを実装することができるようになり、様々なパターンにも対応できるようになりましたか??

後は戻り値であったり表示桁数であったりカウントの秒数などを自由に変更することで目的にあったカウントダウンを実装することができますね(^_^)/

 

最後に!!

今後も、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準にブログを書いていきます。

少しでも気になった方はお試しでもいいので1度、読者登録お願いします!

またTwitterでもプログラミングに関することを中心に情報を発信してます。

宜しければそちらのフォローもお願いします。

最後までご愛読いただきありがとうございました!!