カウントダウンタイマー

残り時間の計算

  1. HOME
  2. カウントダウン

東京オリンピック開催まで

あと日時間分秒


HTMLのソースコード

<p class="timer">あと<span id="day"></span>日<span id="hour"></span>時間<span id="min"></span>分<span id="sec"></span>秒
</p>

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(2021, 6, 23,20);

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();

countdownファンクションの処理

var countdown = function (due)
countdownファンクションは呼び出さなければ実行されません。
パラメーターとして受け取るのは、東京オリンピック開催日を設定した、変数(goal)です。それからdueに代入します。
new Date()の()内にパラメーターを含めると日時を設定した状態で初期化できる
年と月は必須項目で以降は無くても可！
※月は実際の月-1の数にしなければならない！
countdownファンクションが計算した残り時間の配列を変数counterに代入
var counter = countdown(goal);
パラメーターのdueのミリ秒から、変数nowのミリ秒を引いて、変数restに代入しています
var rest = due.getTime() - now.getTime();

getTimeメソッド

カレンダーから現在の時刻を経過ミリ秒の値として取得できます。
var sec = Math.floor(rest / 1000 % 60);
元の数値がミリ秒なので、1000で割れば全体の秒が出る。さらに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時間に満たない秒はfloorで切捨て、その数を24で割った余りが時になる。
var days = Math.floor(rest / 1000 / 60 / 60 / 24);
ミリ秒の数値を1000で割って秒、60で割って分、60で割って時、24で割った答えが日。小数点以下は切捨て。

1秒ごとに再計算させる

var recalc = function () {
recalcファンクションはcountdownファンクションを呼び出して残り時間を計算し、文字連結してTML出力し、最後の処理でrefreshファンクションを呼び出します。
refreshファンクションは1秒後にrecalcファンクションを実行するプログラムです。

setTimeoutメソッド

待ち時間後にファンクションを1度だけ実行するメソッド
setTimeout(ファンクション,待ち時間)
待ち時間にはミリ秒で指定します
※実行しようとさせているファンクション名の後ろに()をつけてはいけない
ファンクションやメソッド名の後ろの()にはその場で実行するという意味がある。setTimeoutの処理が終わる前にrecalcファンクションが実行が何度も繰り返され、エラーになってしまいます。