[JS30] Day29: Countdown Clock

這一天的目標是要製作出一個倒數時鐘，有幾個預設的時間和自訂的時間，並在主畫面進行倒數，與顯示倒數完畢的時間。

HTML

timer-controls為上半部時間區塊，.display呈現倒數時間。每個button都有對應的data-time幫助我們倒數特定時間。

<div class="timer">
  <div class="timer__controls">
    <button data-time="20" class="timer__button">20 Secs</button>
    <button data-time="300" class="timer__button">Work 5</button>
    <button data-time="900" class="timer__button">Quick 15</button>
    <button data-time="1200" class="timer__button">Snack 20</button>
    <button data-time="3600" class="timer__button">Lunch Break</button>
    <form name="customForm" id="custom">
      <input type="text" name="minutes" placeholder="Enter Minutes" />
    </form>
  </div>
  <div class="display">
    <h1 class="display__time-left"></h1>
    <p class="display__end-time"></p>
  </div>
</div>

JS

選擇元素與建立countdown變數，在後面的timer函式中會儲存 interval

let countdown;
const timeDisplay = document.querySelector(".display__time-left");
const endTime = document.querySelector(".display__end-time");
const buttons = document.querySelectorAll("[data-time]");

要呈現剩餘時間和結束時間透過以下函式

function displayTimeLeft(seconds) {
  const minutes = Math.floor(seconds / 60);
  const remainderSeconds = seconds % 60;
  const display = `${minutes}:${
    remainderSeconds < 10 ? "0" : ""
  }${remainderSeconds}`; // 處理小於十秒的情況，在剩餘秒數之前加上一個0
  timeDisplay.textContent = display;
  document.title = display; // 網頁名稱也會跟著倒數
}

function displayEndTime(timestamp) {
  const end = new Date(timestamp);
  const hour = end.getHours();
  const minutes = end.getMinutes();
  endTime.textContent = `Be back at ${hour > 12 ? hour - 12 : hour}: ${
    minutes < 10 ? "0" : ""
  }${minutes}`;
} // 處理小時為12進位制

透過timer來做倒數計時，startTimer啟動倒數

function timer(seconds) {
  clearInterval(countdown);

  const now = Date.now();
  const then = now + seconds * 1000; // 結束時間
  displayTimeLeft(seconds);
  displayEndTime(then);

  countdown = setInterval(() => {
    const secondsLeft = Math.round((then - Date.now()) / 1000);
    if (secondsLeft < 0) {
      clearInterval(countdown);
      return;
    } // 當時間到了會清除interval
    displayTimeLeft(secondsLeft);
  }, 1000); // 每秒跑一次
}

最後在每個 button 裡面加上監聽器，點擊時觸放 startTimer函式。也在name="customForm"的表單中加入提交的監聽器，提交時，做些時間處理在觸放Timer進行倒數計時

buttons.forEach((button) => button.addEventListener("click", startTimer));
document.customForm.addEventListener("submit", function (e) {
  e.preventDefault();
  const mins = this.minutes.value;
  timer(mins * 60);
  this.reset(); // 重置表單
});

HTML​

JS​

HTML

JS