計時器與動態效果

📌 學習目標
✅ 使用 setTimeout 和 setInterval
✅ 建立計時器與倒數功能
✅ 製作動態畫面效果
✅ 開發互動式體驗

教學錄影

計時器：setTimeout 與 setInterval

🔹 setTimeout()：延遲執行一次

setTimeout(function () {
  console.log("3 秒後顯示這條訊息")
}, 3000)

🔹 setInterval()：每隔一段時間執行

setInterval(function () {
  console.log("每 2 秒執行一次")
}, 2000)

🔹 取消計時器

// 清除 setTimeout
let timeoutId = setTimeout(function () {
  console.log("這不會被執行")
}, 1000)
clearTimeout(timeoutId)

// 清除 setInterval
let intervalId = setInterval(function () {
  console.log("停止前會執行")
}, 1000)
clearInterval(intervalId) // 停止執行

🎯 練習

1. 設計一個倒數計時器，每秒更新顯示的數字。
2. 設計一個按鈕，點擊後每 2 秒變換背景顏色。

實作倒數計時器

<div id="timer">10</div>
<button id="startBtn">開始</button>
<button id="stopBtn">停止</button>

<script>
  let countdown
  let seconds = 10

  document.getElementById("startBtn").addEventListener("click", function () {
    // 清除舊的計時器，避免重複計時
    clearInterval(countdown)

    // 重設秒數
    seconds = 10
    document.getElementById("timer").innerText = seconds

    // 開始新計時器
    countdown = setInterval(function () {
      seconds--
      document.getElementById("timer").innerText = seconds

      if (seconds <= 0) {
        clearInterval(countdown)
        alert("時間到！")
      }
    }, 1000)
  })

  document.getElementById("stopBtn").addEventListener("click", function () {
    clearInterval(countdown)
  })
</script>

動態效果實作

🔹 背景顏色切換

let colors = ["#FF5733", "#33FF57", "#3357FF", "#F3FF33"]
let currentIndex = 0

function changeBackgroundColor() {
  document.body.style.backgroundColor = colors[currentIndex]
  currentIndex = (currentIndex + 1) % colors.length
}

// 點擊按鈕後執行顏色切換
document.getElementById("colorBtn").addEventListener("click", function () {
  // 每 1.5 秒切換一次顏色
  setInterval(changeBackgroundColor, 1500)
})

🎯 實作練習

1. 建立一個進度條，5 秒內從 0% 增加到 100%。
2. 設計一個數位時鐘，即時顯示當前時間。