项目：倒计时页——第一次让页面自己动起来

项目库第 5 个项目。前四个项目做完，页面都是「画好了就不动」的；这一次用不到 30 行 JavaScript，让数字每秒自己刷新——这是你第一次写出「活」的页面。原理见状态：数字变了，页面跟着变。

成品长什么样

页面结构：标题 → 目标说明 → 大号倒计时数字（最后 10 秒变橙，结束变绿显示「完成！」）→ 开始 / 重置按钮。参考成品在 examples/countdown/reference.html，双击打开点「开始」试一下。

第一步：复制这份需求说明

帮我做一个课堂朗读倒计时页面，老师要投屏到教室大屏。
包含：
1. 一个大标题「两分钟朗读练习」和一行目标说明；
2. 一个非常大的倒计时数字，格式 分:秒，从 2:00 开始；
3. 「开始」按钮：点一次开始每秒倒数，计时中再点不重复计时；
4. 最后 10 秒数字变橙色提醒；
5. 倒数到 0：数字变成绿色「完成！」，并显示一句鼓励的话；
6. 「重置」按钮：随时回到 2:00 的初始状态。
风格：深色投影上也清晰，数字用最大号。
怎么算做好：点开始后数字每秒减一，到 0 停住并变绿，重置后完全回到初始状态。

操作步骤

1. 建项目文件夹：countdown。
2. 发需求：把改好的整段发给 AI。
3. 全流程点一遍：开始 → 中途重置 → 再开始 → 等到最后 10 秒 → 等到完成。四个节点都要符合预期。
4. 改时长：让 AI「把总时长从 2:00 改成 3:00，其他不动」——改完验证初始显示、倒数、完成三处都对。
5. 看一眼代码：让 AI 指出「哪几行让数字每秒刷新」。看不懂没关系，知道位置就行（想深究看状态）。

成功检查

• 点开始，数字每秒减一；计时中再点开始不会重复计时
• 最后 10 秒数字变橙；到 0 变绿显示完成和鼓励话
• 任何时刻点重置，回到 2:00 初始状态
• 站远两米看屏幕，数字仍然清晰（投屏标准）

常见卡点

• 连点「开始」越走越快：经典重复计时 bug——用模板四发：「连点开始后倒计时速度变快，应该是重复启动了计时器，帮我修掉」。
• 到 0 显示 0:01 就停：边界差一——把「倒数到 0 应显示完成」作为验收标准再发一次。
• 想每天自动换目标：那需要「记住」设置，看简易记账页的 localStorage；理解边界看数据存在哪。

下一步

• 页面能动了，下一步让它「记住」东西：简易记账页。
• 「每秒刷新」背后发生了什么？读状态。