云端前端练习：用截止时间实现更可靠的番茄钟

本文由 AI 辅助整理，介绍纯前端番茄钟的一种实现思路，不涉及云资源开通、商业服务或实测性能承诺。

一、为什么不要每秒简单减一

入门计时器常用 setInterval 每秒把剩余秒数减一。这种写法容易理解，但定时回调不保证精确到点执行：页面进入后台、主线程繁忙或设备休眠后，界面上的计数可能落后于真实时间。更稳妥的方法是记录本轮结束的时间戳，每次刷新时重新计算“结束时间减当前时间”。定时器只负责刷新显示，不负责累计已经过去的时间。

二、把状态先分清楚

最小状态可以分为 idle、running、paused 和 completed。另用 mode 记录专注或休息，durationMs 记录本轮时长。开始时设置 deadline = Date.now() + remainingMs；暂停时保存 remainingMs = Math.max(0, deadline - Date.now())，并清理刷新定时器；恢复时根据 remainingMs 重建 deadline；重置时清理定时器并恢复当前模式的完整时长。切换模式时应明确重置本轮，避免把专注时长带入休息模式。

三、显示与完成事件分开

每次渲染先计算 left = Math.max(0, deadline - Date.now())。展示秒数可用 Math.ceil(left / 1000)，再拆为分钟和秒。当 left 为零且状态仍为 running 时，先把状态设为 completed，再更新完成次数。先改变状态可以避免相邻两次刷新重复增加统计。只在专注轮次自然结束时增加完成次数；暂停、重置和切换模式不应算作完成。

四、本地保存要考虑恢复

任务清单、已完成次数和当前模式可以保存到 localStorage。读取时用 try/catch 处理无效 JSON，校验字段类型，不把存储数据当作可信代码。保存结构应包含版本号，便于以后调整字段。存储失败时仍让计时器在内存中工作，并提示本次修改可能无法持久保存。

如果希望刷新页面后继续计时，可以保存 deadline 和状态。恢复时重新计算剩余时间；若时间已过，按产品规则结束本轮。为防止刷新后重复统计，需要保存本轮 ID 或完成标志。还应说明：Date.now() 会受系统时间调整影响。仅在当前页面追求单调计时可考虑 performance.now()，但它不能直接作为跨刷新恢复的持久化时间戳。

五、任务输入与隐私

纯前端练习不需要账号、API Key 或远端数据库。渲染用户输入时使用 textContent，避免直接拼接到 innerHTML。给输入设置合理长度，移除前后空白，忽略空任务。删除按钮只影响用户选中的任务，清空全部任务应有明确提示。本地保存也不代表加密，任务名称中不应记录密码、证件号码或其他敏感资料。

六、可验证的验收用例

1. 开始后等待几秒，暂停，确认显示冻结；恢复后继续减少。
2. 多次点击开始，只应存在一个有效刷新计时器。
3. 切换专注与休息，确认时长与按钮状态一致。
4. 暂停后重置，不应增加完成次数。
5. 添加任务、标记完成并刷新，检查本地恢复。
6. 把计时页放到后台再回来，确认依据时间戳刷新剩余时间。
7. 在开发测试配置中使用短时长验证自然结束，确认只统计一次；不要把测试开关作为正式计时逻辑的一部分。

在云端开发环境中预览这类项目，还应区分“本地进程已启动”和“预览地址可访问”：先确认静态文件路径和端口，再使用平台提供的预览入口。无需为一个纯前端练习额外创建付费服务器、开放公网端口或提交任何密钥。

这个练习的重点是状态变化、时间来源和持久化恢复。把三者分开，通常比不断修补倒计时显示更容易维护。