MENU
  1. ホーム
  2. JS
  3. JavaScript
  4. カウントダウンタイマー

カウントダウンタイマー

JavaScript
2024.05.24

カウントダウンタイマーは、指定した時間から0まで秒数を減らす機能です。

カウントダウンタイマー
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>カウントダウンタイマーについて</title>
    <link rel="stylesheet" href="./main.css" />
  </head>
  <body>
    <div id="timer-container">
      <div class="timer-display">
        <span id="days">00</span>日 <span id="hours">00</span>時間
        <span id="minutes">00</span>分 <span id="seconds">00</span>秒
      </div>
      <input type="datetime-local" id="countdown-time" />
      <button id="start-button">スタート</button>
      <button id="reset-button">リセット</button>
    </div>
    <script src="./main.js"></script>
  </body>
</html>
// ページの読み込みが完了
document.addEventListener("DOMContentLoaded", function () {
  let countdownDate;
  const daysElement = document.getElementById("days");
  const hoursElement = document.getElementById("hours");
  const minutesElement = document.getElementById("minutes");
  const secondsElement = document.getElementById("seconds");
  const countdownTimeInput = document.getElementById("countdown-time");
  const startButton = document.getElementById("start-button");
  const resetButton = document.getElementById("reset-button");
  let countdownInterval;

  function updateCountdown() {
    const now = new Date().getTime();
    const distance = countdownDate - now;

    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
    const hours = Math.floor(
      (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
    );
    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((distance % (1000 * 60)) / 1000);

    daysElement.textContent = String(days).padStart(2, "0");
    hoursElement.textContent = String(hours).padStart(2, "0");
    minutesElement.textContent = String(minutes).padStart(2, "0");
    secondsElement.textContent = String(seconds).padStart(2, "0");

    if (distance < 0) {
      clearInterval(countdownInterval);
      daysElement.textContent = "00";
      hoursElement.textContent = "00";
      minutesElement.textContent = "00";
      secondsElement.textContent = "00";
    }
  }

  startButton.addEventListener("click", function () {
    const countdownTimeValue = countdownTimeInput.value;
    if (countdownTimeValue) {
      countdownDate = new Date(countdownTimeValue).getTime();
      if (countdownDate < new Date().getTime()) {
        alert("開始時間は現時刻より後に設定してください");
        return;
      }
      clearInterval(countdownInterval);
      countdownInterval = setInterval(updateCountdown, 1000);
    }
  });

  resetButton.addEventListener("click", function () {
    clearInterval(countdownInterval);
    daysElement.textContent = "00";
    hoursElement.textContent = "00";
    minutesElement.textContent = "00";
    secondsElement.textContent = "00";
    countdownTimeInput.value = "";
  });
});
#timer-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "Arial", sans-serif;
  margin-top: 50px;
}

.timer-display {
  display: flex;
  gap: 10px;
  font-size: 2em;
  font-weight: bold;
  background-color: #282c34;
  color: #61dafb;
  padding: 20px;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
}

.timer-display span {
  display: inline-block;
  min-width: 50px;
  text-align: center;
}

#countdown-time {
  margin-top: 20px;
  padding: 10px;
  font-size: 1em;
}

#start-button,
#reset-button {
  margin-top: 10px;
  padding: 10px 20px;
  font-size: 1em;
  font-weight: bold;
  color: #fff;
  background-color: #61dafb;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#start-button:hover,
#reset-button:hover {
  background-color: #21a1f1;
}
出力結果
00日 00時間 00分 00秒
JavaScript