用一次对话，我做出了一个大学生自习用的番茄钟

用一次对话，我做出了一个大学生自习用的番茄钟

为什么做它

自习时我常常遇到两个问题：想专注，却没有一个顺手的计时工具；一天结束了，又说不清自己到底学了多久。市面上的番茄钟要么只有计时，要么要注册登录、同步账号。于是我想做一个打开就能用的小工具，计时、待办、统计放在一个页面里，数据不上传。

它能做什么

番茄钟。 提供专注、短休息、长休息三种模式，默认 25 分钟、5 分钟、15 分钟，时长都可以改。每完成 4 次专注，自动进入一次长休息。计时结束会有提示音和提醒。

待办清单。 写下当天要做的事，选一项点"专注此项"，之后每完成一次专注，这件事的"已专注次数"就会加一。我一直想知道一道题、一份实验报告到底花了几个番茄，现在能看到了。

学习统计。 显示今日专注时长、完成次数、完成的待办数和连续学习天数，再加一张近 7 天的柱状图，用虚线标出每日 120 分钟的目标。

设计上的几个想法

页面底色做成方格笔记纸的样子，和自习的场景贴近。颜色上只有一处用了荧光笔黄，用来标记"正在专注"的那一项，像在笔记上划重点。页面会跟随系统自动切换浅色和深色模式，手机上也能正常使用。

技术实现

整个作品是一个 HTML 文件，用原生 JavaScript 写成，没有后端，也没有框架，除了字体以外没有外部依赖。几个有意思的点：

• 计时用结束时间戳，不用累加。 如果每秒减一，浏览器切到后台时定时器会被降速，倒计时就会变慢。记录"预计结束的时刻"，每次刷新时用它减去当前时间，就不受影响。
• 数据存在浏览器的 localStorage 里。 读写都包了 try/catch，在隐私模式等读不到的情况下页面仍能正常使用，只是刷新后记录会丢。
• 柱状图自己用 SVG 画。 没有引入图表库，坐标轴按数据最大值和目标值自动取整，并监听容器宽度变化重新绘制，手机和电脑上文字都不会被缩得太小。
• 示例数据。 打开页面时预置了几天的示例记录和待办，方便第一次看就明白它的作用，点一下按钮即可清空。

目前的不足

• 数据只在当前浏览器里，换设备或清除浏览器数据后记录会消失，没有云同步。
• 页面在后台时，提示音能否播放取决于浏览器的限制。
• 统计只做了近 7 天，还没有按周、按月汇总。