JavaScriptとHTMLを使用して複数のカウントダウンを作成する方法

<div id="countdown"></div>

次に、JavaScriptを使用してカウントダウンのロジックを実装します。以下の例では、ターゲットの日付と現在の日付の差を計算し、その差を元にカウントダウンを更新します。

// ターゲットの日付を設定します
const targetDate = new Date("2024-02-28T00:00:00");
// カウントダウンを更新する関数を定義します
function updateCountdown() {
  const currentDate = new Date();
  const difference = targetDate - currentDate;
  // 残り時間を計算します
  const days = Math.floor(difference / (1000 * 60 * 60 * 24));
  const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((difference % (1000 * 60)) / 1000);
  // カウントダウン要素を取得して更新します
  const countdownElement = document.getElementById("countdown");
  countdownElement.innerHTML = `${days}日 ${hours}時間 ${minutes}分 ${seconds}秒`;
  // 1秒ごとにカウントダウンを更新します
  setTimeout(updateCountdown, 1000);
}
// 初回のカウントダウン更新を実行します
updateCountdown();

上記のコードでは、目標の日付を設定し、現在の日付との差を計算して、残り時間を表示しています。また、setTimeout関数を使用して1秒ごとにカウントダウンを更新しています。

この方法を使えば、複数のカウントダウンを作成することもできます。単に上記のコードを複製し、異なる要素に対して異なるターゲット日付を設定するだけです。

以上が、JavaScriptとHTMLを使用して複数のカウントダウンを作成する方法です。これを参考にして、自分のウェブページやアプリケーションでカウントダウン機能を実装してみてください。