作品十一：学习番茄钟

前面的项目都是数据展示和管理，现在让我们做一个涉及定时器和通知的项目 。​

​

💤

番茄工作法是一种流行的时间管理方法，做一个番茄钟应用可以让你学习如何处理定时器 、通知等功能。​

​

番茄工作法的原理是工作 25 分钟，休息 5 分钟，这样循环进行 。​

•

这个应用要实现倒计时功能，支持开始、暂停 、重置 。用户可以自定义工作和休息的时长 ​

•

时间到了要发出通知提醒，还可以播放提示音 ​

•

另外还要有统计功能，记录完成的番茄钟数量，帮助用户了解自己的工作效率。​

​

​

​

​

33%

​

​

​

​

33%

​

​

​

​

33%

​

​

​

🎈

技术选型上，前端用 React + TypeScript + Vite ，样式用 Tailwind CSS ，通知用浏览器自带的Notification API ，数据存储用 LocalStorage​

​

开发步骤​

1） 实现倒计时逻辑​

开发的核心是实现倒计时逻辑 。告诉 AI：​

​

代码块​

Plain Text

实现番茄钟倒计时功能：​

- 默认工作 25 分钟，休息 5 分钟​

- 支持开始 、暂停 、重置​

- 时间格式显示为 MM:SS​

- 倒计时结束时触发提醒​

​

这个提示词清楚地说明了要实现什么功能 。AI 会用 JavaScript 的 setInterval 来实现倒计时，每秒减 1 ，到0 时触发提醒。​

2） 实现通知功能​

然后实现通知功能 。浏览器的 Notification API 可以发送系统通知，但需要先请求用户权限 。告诉 AI：​

​

代码块​

Plain Text

实现浏览器通知功能：​

- 页面加载时请求通知权限​

- 倒计时结束时发送通知​

- 通知标题是"番茄钟"， 内容是"时间到了，该休息了！"​

​

这个提示词说明了通知的触发时机和内容 。AI 会先检查浏览器是否支持通知，然后请求权限，最后在时间到了的时候发送通知。​

3）添加音效​

还可以添加音效 。时间到了播放一个提示音 ，这样即使用户没看屏幕也能知道时间到了 。告诉 AI：​

​

代码块​

Plain Text

​

AI 会用 Audio 对象来播放音频文件。​

4）添加统计功能​

最后添加统计功能 。告诉 AI：​

​

代码块​

Plain Text

实现统计功能：​

- 记录完成的番茄钟数量​

- 显示今日完成数量 、本周完成数量​

- 数据保存在 LocalStorage​

​

这样用户可以看到自己的工作效率，更有成就感。​

关键技术点​

这个项目的核心是倒计时逻辑和通知功能 。倒计时要准确，每秒减 1，不能有误差 。通知功能需要先请求用户权限，如果用户拒绝了权限，要给出友好的提示。​

为了更好的用户体验，可以在计时时更新页面标题，这样用户切换到其他标签页时也能看到剩余时间 。还可以添加提示音， 时间到了播放一个声音。​

扩展思路​

基础版完成后，可以继续扩展功能 。​

比如添加长休息功能，4 个番茄钟后休息 15 分钟；​

记录每天的番茄钟数量，生成统计图表；​

添加任务列表，把番茄钟和具体任务关联起来；数据可视化，用图表展示工作效率；​

甚至可以支持背景音乐，让工作更有氛围。​