申し訳ございません。
このサイトはお使いのブラウザに対応しておりません。
別のブラウザをご利用ください。

Microsoft Edgeで開く

blog

home blog あと何時間何分何秒？JavaScriptでカウントダウンを作る

あと何時間何分何秒？JavaScriptでカウントダウンを作る

「セール終了まであと〇〇時間〇〇分〇〇秒！」「〇〇時間〇〇分以内に注文すれば翌日お届け！ 」のような表示、よく見かけますよね。

時間が刻一刻と過ぎるのが目に見えて、ちょっと焦るヤツです。

それを実装したいと思います。

目次

  1. 実装目標の確認
  2. HTML・CSS・JavaScript コード例
  3. コードの解説
  4. まとめ

実装目標の確認

今から2030年5月6日まであと 日 時間 分 秒 です。

ゴール日時までの日・時間・分・秒を表示し、1秒ごとに数字が書き換えられていくようにします。

HTML・CSS・JavaScript コード例

<p>
  今から2030年5月6日まであと
  <span class="number" id="day"></span>日
  <span class="number" id="hour"></span>時間
  <span class="number" id="min"></span>分
  <span class="number" id="sec"></span>秒
  です。
</p>
.number {
  font-size: 24px;
  font-weight: bold;
  color: red;
}
// ゴール時間の設定
const goal = new Date(2030, 4, 6);

// futureまでの時間を計算する関数
function countDown(future) {
  const now = new Date();
  const difference = future.getTime() - now.getTime();
  const sec = Math.floor(difference / 1000) % 60;
  const min = Math.floor(difference / 1000 / 60) % 60;
  const hour = Math.floor(difference / 1000 / 60 / 60) % 24;
  const day = Math.floor(difference / 1000 / 60 / 60 / 24);
  const time = [day, hour, min, sec];
  return time;
}

// テキストを書き換える関数
function textChange() {
  const goalTime = countDown(goal);
  document.getElementById('day').textContent = goalTime[0];
  document.getElementById('hour').textContent = goalTime[1];
  document.getElementById('min').textContent = goalTime[2];
  document.getElementById('sec').textContent = goalTime[3];
  if(goalTime[3] > 0) {
    refresh();
  }
}

// refresh関数を定義
function refresh() {
  setTimeout(textChange, 1000);
}

// textChange関数を実行
textChange();

コードの解説

まずはゴール時間の設定をしています。

「〇月」の指定は、数値を1引いて書きます。

次に3種類の関数を定義しています。

1つ目は、ある「未来」までの時間を計算する関数。

// 現在の時刻をnowに格納
const now = new Date();

// [1970年1月1日 ～ futureの経過ミリ秒] － [1970年1月1日 ～ nowの経過ミリ秒] = [now～futureのミリ秒]
const difference = future.getTime() - now.getTime();

// [ミリ秒]÷60の余りが[秒] → 小数点切捨て
const sec = Math.floor(difference / 1000) % 60;

// [ミリ秒]÷60÷60の余りが[分] → 小数点切捨て
const min = Math.floor(difference / 1000 / 60) % 60;

// [ミリ秒]÷60÷60÷24の余りが[時間] → 小数点切捨て
const hour = Math.floor(difference / 1000 / 60 / 60) % 24;

// [ミリ秒]÷60÷60÷24の商が[日] → 小数点切捨て
const day = Math.floor(difference / 1000 / 60 / 60 / 24);

// 日、時間、分、秒をtimeに格納
const time = [day, hour, min, sec];

// countを戻り値として返す
return time;

2つ目はテキストを書き換える関数。

上で定義した関数を使って出した「日、時間、分、秒」を、テキストに代入します。

// 現在からgoalまでの時間を配列に格納
const goalTime = countDown(goal);

// 配列から日を取り出しdayに代入
document.getElementById('day').textContent = goalTime[0];

// 配列から時間を取り出しhourに代入
document.getElementById('hour').textContent = goalTime[1];

// 配列から分を取り出しminに代入
document.getElementById('min').textContent = goalTime[2];

// 配列から秒を取り出しsecに代入
document.getElementById('sec').textContent = goalTime[3];

// goalまでの秒数が0より大きい時、refresh関数を呼び出し
if(goalTime[3] > 0) {
  refresh();
}

3つ目は、上の「テキストを書き換える関数」を呼び出すための関数。

// 1000ミリ秒後（=1秒後）にtextChange関数を1度だけ実行
setTimeout(textChange, 1000);

最後にtextChange();を書いていますが、上の関数は定義しただけなので、流れとしてはこのtextChange();から始まります。

  1. textChange関数呼び出し
  2. goal時間を引数にしてcoutnDown関数が呼び出される
  3. goalまでの時間が配列で返ってくる
  4. 配列を順番にhtmlのテキストへ代入
  5. refresh();関数が呼び出される
  6. 1秒後にtextChange関数が呼び出される

これがずっと繰り返されていくことになります。goalまでの秒数が0秒になればrefresh();が呼び出されず、カウントダウンがストップします。

まとめ

いかがでしたか？

今回は、日・時間・分・秒を表示しましたが、状況に応じて表示を減らしたり、ミリ秒まで表示したりと使い方はいろいろです。

計算の部分がちょっとややこしいですが、ゆっくり落ち着いて考えると単純な計算です。

様々な場面に是非ご活用ください。

最後までご覧いただきありがとうございました。