主题
控制按钮
本节目标
给番茄时钟加上三个按钮：开始、暂停、重置。
告诉 AI
在聊天面板中输入：
给番茄时钟加三个按钮：开始、暂停、重置。点击"开始"倒计时运行，点击"暂停"倒计时暂停，点击"重置"时间回到 25:00。
看看效果
接受 AI 的更改，刷新浏览器。你应该能看到三个按钮出现在时间数字下方。
试试分别点击每个按钮：
- 开始：倒计时开始走
- 暂停：倒计时停在当前时间
- 重置：时间回到 25:00
如果按钮不好看
你可能觉得默认的按钮样式有点丑。没关系，我们在后面的"视觉优化"一节会统一美化界面。现在先专注功能。
不过如果你实在忍不住，可以先跟 AI 说：
把这三个按钮的样式改好看一点
AI 会帮你调整按钮的颜色、圆角、大小等。这完全取决于你——先做功能再美化，或者边做边美化，都可以。Vibe Coding 没有固定的流程，你想怎么做就怎么做。
常见问题
暂停后再点"开始"没有反应
告诉 AI：
暂停之后再点开始按钮没有反应，倒计时不能恢复
连续快速点击"开始"导致倒计时加速
告诉 AI：
如果连续点击多次"开始"按钮，倒计时速度会变快，好像跑了多个计时器。请修复这个问题。
重置按钮没有停止倒计时
告诉 AI：
点击重置按钮后时间回到了 25:00，但是倒计时还在继续走，请让重置按钮同时停止计时
下一步
控制功能已经完成了。但现在的番茄时钟只有 25 分钟工作时间，还没有休息时间。下一节我们来实现工作和休息的切换。