倒數計時器應用

2024 iThome 鐵人賽

DAY 26

JavaScript

JavaScript 基礎：端開發的第一步系列第 27 篇

16th鐵人賽

ahpao

2024-10-13 15:48:39

81 瀏覽

分享至

功能需求：

設定倒數時間：使用者可以輸入倒數時間（以秒為單位）。
開始倒數：點擊「開始倒數」按鈕後，時間會每秒遞減。
顯示剩餘時間：每秒更新畫面，顯示剩餘的秒數。
倒數結束提示：當時間到達 0 秒時，顯示「時間到了！」。

開發步驟

1. HTML 結構

我們首先創建一個基本的 HTML 框架，包含倒數時間的輸入框、開始按鈕和時間顯示區域。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>倒數計時器</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      padding: 50px;
    }
    #timeDisplay {
      font-size: 3rem;
      margin: 20px 0;
    }
    input, button {
      padding: 10px;
      font-size: 1rem;
    }
  </style>
</head>
<body>

  <h1>倒數計時器</h1>

  <label for="timeInput">請輸入秒數：</label>
  <input type="number" id="timeInput" placeholder="秒數">
  <button id="startBtn">開始倒數</button>

  <div id="timeDisplay">0</div>

  <div id="message"></div>

  <script src="timer.js"></script>
</body>
</html>

2. JavaScript 邏輯 (timer.js)

接下來，我們編寫 JavaScript 來實現倒數計時功能，並動態更新頁面上的剩餘時間。

let timeDisplay = document.getElementById('timeDisplay');
let messageDisplay = document.getElementById('message');
let startBtn = document.getElementById('startBtn');
let timeInput = document.getElementById('timeInput');

let countdown;
let timeLeft;

startBtn.addEventListener('click', () => {
  clearInterval(countdown); // 如果之前有倒數，先清除
  timeLeft = parseInt(timeInput.value); // 獲取使用者輸入的秒數

  if (isNaN(timeLeft) || timeLeft <= 0) {
    messageDisplay.textContent = '請輸入有效的秒數！';
    return;
  }

  messageDisplay.textContent = ''; // 清除之前的訊息
  timeDisplay.textContent = timeLeft;

  countdown = setInterval(() => {
    timeLeft--;
    timeDisplay.textContent = timeLeft;

    if (timeLeft <= 0) {
      clearInterval(countdown);
      messageDisplay.textContent = '時間到了！';
    }
  }, 1000); // 每1000毫秒（1秒）更新一次
});

功能解析：

輸入秒數：透過 timeInput.value 取得使用者輸入的倒數時間，並轉換為數字。
倒數邏輯：
- 使用 setInterval() 每秒執行一次，倒數計時器的核心邏輯是讓時間每秒減 1。
- 當 timeLeft <= 0 時，停止倒數（用 clearInterval() 停止計時器）並顯示「時間到了！」訊息。
事件處理：
- 當使用者點擊「開始倒數」按鈕後，觸發倒數計時。
- 如果使用者在倒數結束之前點擊按鈕，計時器會重新開始。
驗證輸入：
- 當輸入的數字無效（如輸入為 0 或負數），程式會顯示錯誤訊息「請輸入有效的秒數！」。