🧪 練習題：Start / Stop 計時器（Vue 3 Composition API）

🎯 目標

實作一個簡單的計時器，包含開始 / 暫停 / 重置功能，並透過這題練習：

• template 資料顯示
• event handler 綁定
• ref / reactive 使用
• HTML attributes 控制（disabled / class / style）

---

📦 基本需求（必做）

1️⃣ 畫面 UI

頁面需包含：

• 一個顯示時間的區塊（格式：00:00:00）
• 一個 Start 按鈕
• 一個 Stop 按鈕
• 一個 Reset 按鈕

---

2️⃣ 計時規則

• 初始時間：00:00:00
• 每秒 +1 秒
• 格式為：HH:mm:ss
• 不需要處理超過 24 小時

---

3️⃣ 按鈕行為

▶ Start

• 開始計時（使用 setInterval）
• 若已在計時中，不可重複啟動

⏸ Stop

• 暫停計時（保留當前時間）

🔄 Reset

• 清除計時
• 回到 00:00:00
• 停止計時

---

4️⃣ 狀態控制（重點）

請實作：

• 計時是否進行中（isRunning）
• 秒數（或時間物件）

---

🧠 技術要求（強制）

✔ Composition API

必須使用：

setup() (or <script setup>)

ref()
或 reactive()

---

✔ Template 綁定

需包含：

• {{ }} 顯示時間
• @click 綁定事件

---

✔ Attribute 控制（重點）

需實作：

disabled 狀態

按鈕	條件
Start	計時中 → disabled
Stop	未計時 → disabled
Reset	永遠可用

👉 必須使用 :disabled 綁定

---

✔ class 或 style 綁定（至少一種）

例如：

• 計時中 → 顯示綠色
• 停止時 → 顯示灰色

👉 使用：

:class="..."
或
:style="..."

---

🔧 實作提示（如有需要可參考）

時間資料

可以只存秒數：

const seconds = ref(0)

---

interval 控制

let timerId: number | null = null

---

格式化時間（建議寫 function）

function formatTime(totalSeconds: number): string

---

⭐ 加分項目（本題可先略過）

1️⃣ 防呆

• 重複按 Start 不應該開多個 interval

---

2️⃣ UI 優化

• 按鈕顯示不同文字（例如 Start → Running）
• 或加 icon（非必要）

---

3️⃣ 程式整理

• 把 formatTime、startTimer、stopTimer、resetTimer 拆成清楚的 function

---

📘 後續主題（這題先不做）

• watch
• computed
• 元件拆分（例如 TimerDisplay.vue、TimerControl.vue）

---

❌ 禁止事項

• ❌ 不可使用 Options API
• ❌ 不可直接操作 DOM（例如 document.getElementById）
• ❌ 不可使用第三方 timer 套件

---