在準備好了時間格式化工具與變數之後，接下來要解決計時器的關鍵問題：如何讓數字每秒自動加 1 並更新到畫面上？

我們可以使用JavaScript 的原生函式－ setInterval 。

觀念解析：setInterval 與 clearInterval

JavaScript 提供原生的 setInterval 函式，專門用來處理 「定時重複執行」 的任務。

let timerId = setInterval(func, delay);

• func：每次間隔時間到達時要執行的函式。

• delay：間隔時間（毫秒，1000 ms = 1 秒）。

• timerId：回傳一個數字識別碼（ID）。

留意點

如果呼叫了 setInterval 卻沒有將它的 timerId 存起來，就無法透過 clearInterval(timerId) 停止它。
若多次點擊「開始」按鈕，背景會同時運作多個計時器，導致時間數字暴走跳動（1 秒跳 3、4 次），因此需要特別注意。

個人筆記：
Web API | 讓網頁自動倒數與定時執行：setInterval() 使用指南

實作「開始計時」邏輯

撰寫 startTimer 函式時，每次執行前先確認當前是否已在計時（防呆），接著啟動 setInterval：

// 開始計時函式
function startTimer() {
  // 防呆機制：如果已經在運作中，直接中斷，避免重複觸發
  if (isRunning) return;

  isRunning = true;

  // 啟動定時器：每 1000 毫秒 (1秒) 執行一次
  timerInterval = setInterval(() => {
    seconds++;                               // 總秒數加 1
    timerDisplay.textContent = formatTime(seconds); // 更新 UI
  }, 1000);
}

// 監聽開始按鈕點擊
btnStart.addEventListener('click', startTimer);

當點擊「開始計時」時，畫面上的時間就會開始精確地每秒累加了。

小結

目前成功使用 setInterval 讓計時器動了起來。然而現在介面上的按鈕還不會隨狀態變化，明天將補齊 UI 切換 以及 暫停/結束 的控制。