番茄钟专注计时器

番茄钟专注计时器

项目简介

番茄钟专注计时器是一款基于番茄工作法的纯前端效率工具。它把经典的「专注 25 分钟 + 休息 5 分钟」节奏搬进浏览器：点击开始，环形进度条带你进入一段心无旁骛的专注时间；一轮结束自动切换到休息，完成设定轮数后进入长休息。数据保存在浏览器本地，关掉页面再打开，今日的专注成果依然在。

整个应用由单个 HTML 文件承载，零依赖、零后端，打开即用。

核心功能

• 三模式计时：专注 / 短休息 / 长休息三种模式，对应不同的环形进度与配色，一目了然当前处于哪个阶段。

• 自动流转：专注倒计时结束后自动进入短休息；完成设定轮数（默认 4 轮）后自动进入长休息，形成完整的番茄节奏。

• 时长自定义：专注、短休、长休时长与每轮数量均可调整，适配不同工作习惯。

• 本地统计：完成的番茄数与累计专注分钟数持久化保存，可随时回看今日专注成果。

• 完成提示音：专注结束时播放三声提示音，用声音提醒切换阶段。

• 完整控制：支持开始 / 暂停 / 重置 / 跳过，随时掌控节奏。

技术架构

应用采用「交互控制层 → 计时核心层 → 持久化层」的简洁三层结构，全部运行在浏览器端，无后端依赖。

• 交互控制层：模式切换标签驱动当前阶段；开始 / 暂停 / 重置 / 跳过按钮管理计时状态；时长设置输入框支持运行时调整。

• 计时核心层：倒计时模块以 setInterval 每秒递减剩余秒数，并按比例驱动 SVG 环形进度条的 stroke-dashoffset；状态切换模块在归零时按规则流转——专注完成进入短休、满轮次进入长休。

• 持久化层：完成数与专注分钟数经 localStorage 保存，读取时 JSON 解析恢复，保证刷新不丢失。

核心逻辑说明

计时与进度：以剩余秒数 remain 与总时长 total 计算进度比例，环形周长 666px，进度偏移量 CIRC (1 - remain/total) 随倒计时线性变化，视觉上呈现流畅的环形填充效果。

模式流转：专注归零 → completed++ 并累加专注分钟 → 若当前轮次达到设定的每轮数则重置轮次并进入长休息，否则轮次 +1 进入短休息；休息归零 → 回到专注。跳过按钮提供同逻辑的手动流转。

状态一致性：开始 / 暂停 / 重置 / 切换模式等所有操作统一更新按钮文案、环形配色与统计卡片，由 render() 集中重绘，避免界面与计时状态脱节。

技术栈

使用方式

直接用浏览器打开 index.html 即可使用；也可通过任意静态文件服务器托管后访问。

亮点与价值

• 零依赖、开箱即用：单个 HTML 文件承载全部能力，部署只需一个静态服务器。

• 节奏清晰：自动流转 + 配色区分 + 提示音，让专注与休息的交替几乎无需手动干预。

• 数据本地化：专注成果只存在浏览器本地，无隐私上传风险。

• 代码简洁可扩展：核心逻辑紧凑清晰，易于继续扩展（例如增加任务绑定、白噪音、专注历史图表等功能）。
• 项目地址：开发者作品展览馆