SQL見るだけクエリ#197 HTMLとJavaScriptを使用して5分間のカウントダウンタイマーを作成

HTMLとJavaScriptを使用して5分間のカウントダウンタイマーを作成する方法解説してみようと思います。

この記事を読むと（約5分）
HTMLとJavaScriptを使用して5分間のカウントダウンタイマーを作成する方法解説してみようと思います。

5分間のカウントダウンタイマーを作成

自動遷移までの時間

5:00

<h1>自動遷移までの時間</h1>
  <div id="timer">5:00</div>

  <script>
    // カウントダウンする秒数（ここでは300秒＝5分）
    let countdownSeconds = 300;

    // カウントダウンのタイマーを表示する要素を取得
    const timerElement = document.getElementById('timer');

    // カウントダウンの時間を更新する関数
    function updateTimerDisplay(seconds) {
      const minutes = Math.floor(seconds / 60);
      const remainingSeconds = seconds % 60;
      const displayText = ${minutes}:${remainingSeconds.toString().padStart(2, '0')};
      timerElement.textContent = displayText;
    }

    // カウントダウンのタイマーを開始
    const countdownInterval = setInterval(() => {
      countdownSeconds -= 1;
      updateTimerDisplay(countdownSeconds);

      // カウントダウンが終了したらページを遷移
      if (countdownSeconds <= 0) {
        clearInterval(countdownInterval);
        window.location.href = '次のページのURLをここに入力';
      }
    }, 1000);
  </script>

このコードは、HTMLとJavaScriptを使用して5分間のカウントダウンタイマーを作成し、タイマーが終了したら別のページに自動的に遷移する機能を実装しています。以下でコードの詳細を解説します。

1. HTML部分:

<h1>自動遷移までの時間</h1>
<div id="timer">5:00</div>

h1要素: ページ上部に表示される見出しタイトルを定義しています。
div要素: カウントダウンタイマーの表示を行うための要素で、id属性が "timer" として指定されています。このid属性は後でJavaScriptで使用されます。

2. JavaScript部分:

// カウントダウンする秒数（ここでは300秒＝5分）
let countdownSeconds = 10;

// カウントダウンのタイマーを表示する要素を取得
const timerElement = document.getElementById('timer');

countdownSeconds: カウントダウンの秒数を表す変数です。初期値は300秒（5分）として設定されています。
timerElement: カウントダウンタイマーの時間を表示するためのdiv要素を取得するために、getElementByIdメソッドを使用しています。

// カウントダウンの時間を更新する関数
function updateTimerDisplay(seconds) {
  const minutes = Math.floor(seconds / 60);
  const remainingSeconds = seconds % 60;
  const displayText = ${minutes}:${remainingSeconds.toString().padStart(2, '0')};
  timerElement.textContent = displayText;
}

updateTimerDisplay関数: カウントダウンタイマーの表示を更新するための関数です。
Math.floor(seconds / 60): 残り秒数を60で割って、分数部分を切り捨てて分を計算します。
seconds % 60: 残り秒数を60で割った余りを計算して、残りの秒数を取得します。
remainingSeconds.toString().padStart(2, '0'): remainingSecondsを文字列に変換し、必要に応じて2桁の数字にパディング（先頭に0を追加）します。
最後に、カウントダウンタイマーの表示を更新するために、timerElement.textContentを新しいテキスト displayText に設定します。

// カウントダウンのタイマーを開始
const countdownInterval = setInterval(() => {
  countdownSeconds -= 1;
  updateTimerDisplay(countdownSeconds);

  // カウントダウンが終了したらページを遷移
  if (countdownSeconds <= 0) {
    clearInterval(countdownInterval);
    window.location.href = '次のページのURLをここに入力';
  }
}, 1000);

setInterval: 1000ミリ秒（1秒）ごとに指定されたコールバック関数を実行するタイマーを設定します。ここでは、カウントダウンを1秒ごとに更新するために使用されています。
タイマーコールバック内の処理:
countdownSeconds -= 1;: カウントダウン秒数を1減らします。
updateTimerDisplay(countdownSeconds);: カウントダウンタイマーの表示を更新します。
if (countdownSeconds <= 0) { ... }: カウントダウンが終了したかどうかをチェックします。
clearInterval(countdownInterval);: カウントダウンが終了した場合、タイマーをクリアして繰り返しを停止します。
window.location.href = '次のページのURLをここに入力';: カウントダウンが終了したら、指定されたURLへ自動的に遷移します。この部分では、遷移先のURLを指定する必要があります。

以上がこのコードの概要となります。このコードは指定された秒数のカウントダウンを開始し、終了時に指定されたURLへ自動的に遷移します。ただし、タイマーの時間や遷移先のURLは適切に設定する必要があります。