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

記入日：2023-07-25　編集日：2023-07-25

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

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

カウントダウン開始

自動遷移までの時間

<h2 class="tittle2s fs-4 fw-bold">
5分間のカウントダウンタイマー ボタンを作成
</h2>

<button class="mt-4 mb-2" id="startButton">カウントダウン開始</button>
<h3 class="fs-4 mb-0">自動遷移までの時間</h3>
<div class="fs-4 fw-bold" 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;
  }

  // カウントダウンを開始する関数
  function startCountdown() {
    const countdownInterval = setInterval(() => {
      countdownSeconds -= 1;
      updateTimerDisplay(countdownSeconds);

      if (countdownSeconds <= 0) {
        clearInterval(countdownInterval);
        window.location.href = '次のページのURLをここに入力';
      }
    }, 1000);
  }

  // ボタンがクリックされたときにカウントダウン開始関数を呼び出すイベントリスナーを追加
  const startButton = document.getElementById('startButton');
  startButton.addEventListener('click', startCountdown);
  </script>

上記のコードは、HTMLとJavaScriptを使って、5分（300秒）のカウントダウンタイマーを作成し、指定された時間が経過した後に次のページに自動的に遷移する機能を実装しています。以下にコードの各部分を解説します。

1. HTML部分:

<button class="mt-4 mb-2" id="startButton">カウントダウン開始</button>
<h3 class="fs-4 mb-0">自動遷移までの時間</h3>
<div class="fs-4 fw-bold" id="timer">5:00</div>

HTML部分では、以下の要素が定義されています:

• ボタン（id="startButton"）: クリックすることでカウントダウンが開始されるボタンです。
• 見出し（h3要素）: "自動遷移までの時間"というテキストが表示される見出しです。
• ディスプレイ領域（div要素）: カウントダウンタイマーの時間が表示される領域であり、初期値は"5:00"です。

2. JavaScript部分:

// カウントダウンする秒数（ここでは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;
}

// カウントダウンを開始する関数
function startCountdown() {
  const countdownInterval = setInterval(() => {
    countdownSeconds -= 1;
    updateTimerDisplay(countdownSeconds);

    if (countdownSeconds <= 0) {
      clearInterval(countdownInterval);
      window.location.href = '次のページのURLをここに入力';
    }
  }, 1000);
}

// ボタンがクリックされたときにカウントダウン開始関数を呼び出すイベントリスナーを追加
const startButton = document.getElementById('startButton');
startButton.addEventListener('click', startCountdown);

JavaScript部分では、以下の機能が実装されています:

• countdownSeconds: カウントダウンする秒数を保持する変数で、初期値は300（5分）です。
• timerElement: カウントダウンの時間を表示するためのHTML要素を取得します。
• updateTimerDisplay(seconds): 引数として受け取った秒数を分と秒に変換し、カウントダウンタイマーの表示を更新します。
• startCountdown(): カウントダウンを開始する関数です。setInterval関数を使って1秒ごとにカウントダウンの時間を更新します。カウントダウンが終了したら、
• 最後に、ボタンがクリックされたときにstartCountdown()関数が呼び出されるように、イベントリスナーが追加されています。

このコードをHTMLページに埋め込むと、ページが読み込まれた後に「カウントダウン開始」ボタンが表示されます。ボタンをクリックすると、5分間のカウントダウンが始まり、カウントダウンタイマーが更新されます。カウントダウンが終了すると、指定されたURLに自動的に遷移します。ただし、コード内のコメントに記載されているように、実際に遷移させるためには、遷移先のURLを正しく指定する必要があります。