极简番茄钟

更新记录

• 2025-03-11: 更新了计时结束提示音，提供更舒适的提示体验
• 2025-03-12: 添加了后台计时功能，即使切换标签页也能继续计时
• 2025-03-12: 修复了移动设备上提示音不工作的问题，添加了振动和通知支持

一个简洁、美观的番茄工作法计时器网站，采用极简日系设计风格。

功能特点

• 极简日系UI设计
• 基本番茄钟功能：开始、暂停、重置
• 可自定义工作和休息时间
• 计时结束后声音提示
• 响应式设计，适配各种设备
• 后台计时功能：即使切换到其他标签页或最小化浏览器，番茄钟也能继续计时

使用方法

1. 打开网站，默认工作时间为25分钟，休息时间为5分钟
2. 点击"开始"按钮开始计时
3. 需要暂停时，点击"暂停"按钮
4. 需要重置时，点击"重置"按钮
5. 可以在设置区域自定义工作和休息时间
6. 可以开启或关闭声音提示
7. 即使切换到其他标签页或应用程序，番茄钟也会在后台继续计时
8. 在移动设备上，首次使用时需要与页面交互(如点击任意位置)以启用声音
9. 如果允许通知权限，计时结束时还会收到桌面通知

技术特性

• 使用页面可见性API (visibilitychange事件)实现后台计时功能
• 采用绝对时间戳计算方式，确保计时准确性
• 优化的暂停/恢复机制，提供流畅的用户体验
• 响应式设计，适配各种设备尺寸

技术栈

• HTML5
• CSS3
• JavaScript (原生)

文件结构

• index.html - 主页面
• styles.css - 样式表
• script.js - 功能脚本
• favicon.svg - 网站图标
• bell.mp3 - 提示音文件

如何运行

直接在浏览器中打开index.html文件即可使用。

版权信息

© 2023 水木易 | 极简番茄钟