UI設計したり、ウェブシステムを開発したりします。 

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

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

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

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

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

自動遷移までの時間

5:00
<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を正しく指定する必要があります。

SQLの使いどころ

サイトに大量の情報を掲載することは、ユーザーにとってとても便利なことです。しかし、情報が多すぎると、目的の情報を見つけるのが困難になります。そのため、SQLを使用することで、情報を効率的に管理することができます。

SQLを使用することで、データベース内の情報を検索したり、フィルタリングしたりすることができます。これにより、ユーザーは目的の情報をスムーズかつ簡単に見つけることができます。

また、SQLを使用することで、データを集計したり、統合したりすることもできます。これにより、ユーザーはさまざまな視点から情報を分析することができます。つまり、サイトに多くの情報を掲載することが重要である一方で、その情報を効率的かつ簡単に管理することが求められる場合には、SQLが不可欠であるといえます。

KK

機械工学を専攻。工業デザイナーとして、国内及び海外の自動車・搬送ラインの設計などに従事した後、2003年にウェブシステム会社を設立。UI設計やウェブシステムの開発、DX化のディレクションなどを行っています。