JavaScriptでカウントダウンタイマーの作り方

カウントダウンタイマー　

解説

「var countdown = function(due){～ 」ではパラメータとしてゴール時間が設定されたDateオブジェクトを受け取り、dueに代入してます。

「var now = new Date();」にてDateオブジェクトを初期化して、変数nowに代入してます。

「var rest = due.getTime() – now.getTime();」ではパラメータdueの「ミリ秒」から、変数nowの「ミリ秒」を引いて、変数restに代入してます。 DateオブジェクトのgetTimeメソッドは、ミリ秒を取得します。

この変数restのミリ秒の数値をもとに秒、分、時、日を求めていきます。

秒を求める

「var sec = Math.floor(rest / 1000) % 60;」 1秒は1000ミリ秒なので、1000で割れば全体の秒が出ます。さらにそれを60で割れば「分」になりますが、1分に満たないのが秒数なので、60で割った余りで秒が出ることになります。

分を求める

「var min = Math.floor(rest / 1000 /60 ) % 60;」 　ミリ秒を1000で割って秒を求め、それを60で割って分が出ます。このとき小数点以下がでたらそれは1分に満たない「秒」なのでfloorメソッドで切り捨てます。そしてその数を60で割った余りが「分」になります。

時を求める

「var hours = Math.floor(rest / 1000 / 60 / 60 ) % 24;」 ミリ秒を1000で割って秒、60で割って分、さらに60で割って全体の「時」がでます。小数点以下は1時間に満たないので切り捨てます。それを24で割った余りが「時」です。

日を求める

「var days = Math.floor(rest / 1000 / 60 / 60 / 24);」　ミリ秒を1000で割って秒、60で割って分、60で割って時、24で割った答えが「日」です。小数点以下は切り捨てます。

配列にしてリターンする

「var count = [days, hours, min, sec];」 「return count;」こうして求められた日、時、分、秒を「配列」にして変数countに代入し、呼び出し元にリターンします

HTMLに表示する部分

「var counter = countdown(goal);」 countdownファンクションが計算した残り時間の配列を、変数counterに代入します。

「var time = counter[1] + ‘時間’　+ counter[2] + ‘分’　+ counter[3] + ‘秒’;」 「〇時間△分□秒」というテキストを作成し、変数timeに代入します。配列のインデックス「0」日付は使っていません。

「document.getElementById(‘end’).textContent = time;」 (‘end’)Idを取得して<span id=”end”></span>のテキストに出力してます。

解説

1秒ごとに再計算する

残り時間を再計算する。＞　文字列連結をする　＞　HTMLに出力する

「var recalc = function(){～」　はcountdownファンクションを呼び出して残り時間を計算し、文字列連結してHTMLに出力しています。ここまでの処理が前半部分。

recalcファンクションの処理の最後でrefreshファンクション内のsetTimeoutメソッドには「1秒ごとにrecalcファンクションを実行する」という意味のことが書かれています。

1秒後recalcファンクションが実行され、またrefreshファンクションが呼び出されます。そして1秒後にふたたびrecalcファンクションが実行されることがずっと続いて、時間が変わっていくように見えます

この本を参考にして学び、完成させることができました。しかし、ここではプログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません（ToT）
その点、この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^)、実際、初心者の私でもわかりやすかったです。身に付け消えないスキルが3,000円弱ならコスパよく、買っておいてよかったと満足してます。

わからないことはプロフェッショナルから学ぶのが一番

キャリアアップに必要なスキルを取得しよう。

オンラインで受講ができるスクールですので、全国どこからでも。