JavaScriptを使って、カウントダウンタイマーの作り方を説明しています。

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

カウントダウンタイマー　

HTML <section>
<p>日付が変更になるまで | Until the date changes<span id=”end”></span></p>
</section>

JavaScript var countdown = function(due){
var now = new Date();
var rest = due.getTime() – now.getTime();
var sec = Math.floor(rest / 1000) % 60;
var min = Math.floor(rest / 1000 / 60) % 60;
var hours = Math.floor(rest / 1000 / 60 / 60 ) % 24;
var days = Math.floor(rest / 1000 / 60 / 60 / 24);
var count = [days, hours, min, sec];
return count;
}
var goal = new Date();
goal.setHours(23);
goal.setMinutes(59);
goal.setSeconds(59);
var counter = countdown(goal);
var time = counter[1] + ‘時間’　+ counter[2] + ‘分’　+ counter[3] + ‘秒’;
document.getElementById(‘end’).textContent = time;

日付が変更になるまで | Until the date changes

解説

「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秒ごとに再計算する)　| Countdown timer (recalculate every second)

HTML <body>
<h2>クリスマスイブまで | Until Christmas Eve </h2>
<p class=”timer”>あと
<span id=”day”></span>日
<span id=”hour”></span>時間
<span id=”min”></span>分
<span id=”sec”></span>秒
</p>
</body>

JavaScript var countdown = function(due){
var now = new Date();
var rest = due.getTime() – now.getTime();
var sec = Math.floor(rest / 1000) % 60;
var min = Math.floor(rest / 1000 / 60) % 60;
var hours = Math.floor(rest / 1000 / 60 / 60 ) % 24;
var days = Math.floor(rest / 1000 / 60 / 60 / 24);
var count = [days, hours, min, sec];
return count;
}

goal = new Date(2022,11,24);
var recalc = function(){
var counter = countdown(goal);
document.getElementById(‘day’).textContent = counter[0];
document.getElementById(‘hour’).textContent = counter[1];
document.getElementById(‘min’).textContent = counter[2];
document.getElementById(‘sec’).textContent = counter[3];

refresh();
}
var refresh = function(){
setTimeout(recalc, 1000);
}
recalc();

解説

1秒ごとに再計算する

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

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

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

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

実際、クリスマスイブは2023年12月24日ですが、goal = new Date(2022,11,24); としているのは、「月」は「実際の月-1」の数にする必要があるためです。

クリスマスイブまで | Until Christmas Eve

あと日時間分秒

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

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

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

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