倒计时、番茄钟与秒表：切到后台后，哪一台还在走准

三台页面都在计时，显示也都没有小时位，差别在下一层：它们各自认为「现在」是什么。

秒表问系统时钟。每 20 毫秒算一次「现在减去启动时刻」，屏幕上那个数字是从真实时间推出来的。倒计时和番茄钟根本不读时钟：它们启动一个每秒触发的定时器，每次把剩余秒数减 1。浏览器会节流后台标签页的定时器，机器睡眠时干脆停掉，所以这两台数的是次数，不是秒数——这就是它们安静一阵之后会走慢、而且不会自己补回来的原因。

这一点差别解释了下面大部分建议，剩下的都是显示约定和边角情况。文中每个数字都是把页面自己的脚本拿出来跑出来的。

按时钟回算，和按次数递减

	秒表	倒计时 / 番茄钟
显示靠什么推进	现在 − 启动时刻	每个 tick 把剩余量减 1
刷新间隔	20 毫秒	1000 毫秒
切到后台	画面停更，回来直接跳到正确值	走慢，并且一直慢下去
系统睡眠	下一帧自动追平	不会追
暂停再继续	起点整体后移，不累计误差	计数停住而已

秒表这个特性的效果用数字最清楚。让它跑着，只让时钟前进 5 秒而不给刷新机会，画面停在 00:07.00；下一帧刷新时直接读成 00:12.00，5 秒一秒不少。倒计时遇上同样的处境，这 5 秒就丢了。

每台页面读你什么，什么时候读

页面	你的输入	读取时机	后果
倒计时	时/分/秒 三个框、五个预设档	点重置时——只有剩余量已经归零时，「开始」才会顺带读一次	正在跑的这一轮始终用它开始时的时长
番茄钟	专注/休息两个框、两个模式按钮	点重置时，以及每次切换模式时	跑动中改数字不生效，必须重置或切模式
秒表	无	—	没有可配置项，计次是唯一的输入

番茄钟这一条最容易踩：改完专注时长直接点「开始」，用的是旧值。实测——把框改成 30，点开始，读数仍然从 25:00 起走；随后点一次「重置」，30:00 才被载入。页面上那行小字写的就是这件事。

倒计时：预设、三个框，以及每次点击到底做了什么

五个预设是 1 分钟、5 分钟、10 分钟、30 分钟、1 小时，对应 60 到 3600 秒。选预设会同时改写三个输入框——1 小时填成 1/0/0，10 分钟填成 0/10/0——把进度条清零、收起结束提示。如果当时正在跑，预设会先把计时停掉，而不是把新时长塞进一轮跑着的计时里；停完后按钮留在「继续」。

大字是「总分钟:秒」，所以 1 小时写成 60:00，2 小时写成 120:00。底层的秒数一直是准确的，压缩的只是排版。三个框用 parseInt 解析，于是有三种行为值得记住：

• 小数点被截断，不是四舍五入。 分填 1.5、秒填 30.9，载入的是 90 秒，显示 01:30。
• 读不出数字就当 0。 分填 abc 与留空等价，都是 0。
• 负数照收。 分填 −5 会载入 −300 秒，显示成 0-5:00——格式函数会给负的分钟数也补一个前导零。这时点开始，第一个 tick 就把 00:00 写上屏幕，提示和蜂鸣一起出来。

三个框上的 max（99 / 59 / 59）只是提示，不是限制。时填 120 会载入 432000 秒，显示 7200:00，页面照跑，只是排版不合常规。三个框设计内能填出的最大值 99:59:59 等于 359999 秒，屏幕上写成 5999:59。

剩余量归零时页面自己停下，弹出 ⏰ 提示，并响半秒 800 赫兹的音。按钮这时显示「继续」——这个字是准确的，因为剩余量确实是 0，按下去做的是合理的事：重读三个框、从头再来，一次点击就够。蜂鸣用 Web Audio 生成，整段包在容错里：浏览器还没收到过页面上的真实点击时，声音会被静默拦掉，视觉提示照常出现。

时长为 0 也被接受，不会报错。三个框都填 0 时显示 00:00，点开始按钮变成「运行中」，一秒后提示和蜂鸣一起来。进度条始终空着，因为百分比按 (总时长 − 剩余) / 总时长 算，总时长为 0 时被强制成 0。

番茄钟：两段循环，加一个会计数的大脑

循环是专注 → 休息 → 专注，没有第四轮之后的长休息，也不会自动开始下一轮。某个阶段归零时，计时停下、响同样的 800 赫兹、并在500 毫秒后切换模式——但不开始计时。读数显示新阶段的完整长度然后等你：实测专注段走到 00:00，半秒后计时停在休息模式的 05:00，没有在跑。这是有意为之，一段在你话说到一半时就开始倒数的休息，比没有休息更糟。

下面的计数只在专注段走完时加 1。休息段照响蜂鸣、照切回专注，但不碰计数。实测跑完两轮专注两轮休息，计数 0 → 1 → 2，休息期间一次没动；文案固定写成「已完成 N 个番茄」。「重置」和切换模式都不会把它清零，只有刷新页面会。

三个输入行为来自解析方式（专注 parseInt(v) || 25，休息同理换成 5）：

• 留空、填字母、填 0，都退回默认值。 专注填 0 和留空等价，所以不会意外做出一个零长度阶段——你会得到 25 分钟。
• 小数点截断。 专注填 2.5 载入 2 分钟。
• min/max 属性不生效。 专注填 200 会被接受，载入 12000 秒，显示 200:00。框上写着 120，代码不看。
• 负数照收，然后卡住计时。 专注填 −5 会载入 −300 秒并显示 0-5:00；此时点「开始」什么都不会发生——启动逻辑看到剩余量非正，重读字段后直接返回。实测等过一秒的 tick 和半秒的延时，读数一次没动。救回来的办法是把数字改回可用值，再点重置。

还有一个手感问题值得记住，它看起来像按钮坏了：某个阶段刚结束、剩余量为 0 时，第一次点主按钮只执行重置——把该阶段的时长重新填满但不启动，再点一次才真正跑起来。页面上没有任何文字解释这一点，它只是启动逻辑里那个「剩余量非正就重置」判断的自然结果。

计时跑动中两个模式按钮是无效的：专注中途点「休息」，模式、剩余时间和进度条都原样不动。要改模式先停表或重置。

秒表：计次，以及一条实打实的限制

大字是「分:秒.百分秒」，02:47.63 就是 2 分 47 秒 63 个百分秒。内部存的是毫秒、向下取到百分秒，所以显示精度 10 毫秒，刷新间隔 20 毫秒。没有小时位也不切换格式：60 分钟写 60:00.00，90 分钟写 90:00.00，分钟位一直往上走。

「开始」起跑，同一个按钮暂停和继续。暂停时把已过时长存下来，恢复时把起点往前挪同样的长度，所以反复暂停不会累积误差——实测暂停期间时钟走了 4 秒，读数停在 6000 毫秒不动；恢复后再跑 1 秒，读数是 7000 毫秒。

计次只在跑动中可用，暂停或未开始时按钮是禁用状态。每次点击把当时的累计值存下来，列表每行渲染三样东西：序号（「计次 1」）、这一段自己的用时、以及按下时的累计用时。第一段的分段用时等于它的累计值本身，因为前面没有可减的对象；之后每行是本次累计减去上次累计。

着色有两条规则，都是实测的：

• 只有第三条起才标快慢。 两条以内什么都不标，因为没有比较的意义。从第三条开始，最快和最慢的分段会被着色。
• 并列按并列处理。 判定是先比最小值（等于即最快），再比最大值。所以如果所有分段完全相同，每一行都会被标成最快，而不是只标一行。

还有一条实打实的限制：计次记录的是上一次刷新的累计值，不是按下那一刻的精确值。显示每 20 毫秒刷新一次，所以一条计次最多比真实时刻早约 20 毫秒。实测真实已过 1039 毫秒时，存下来的是 1020 毫秒，差 19 毫秒。配速训练里看不出来，需要严格同步的测量就不够用了。

列表不限条数，也没有删除单条计次的功能；重置会把读数和所有计次一起清掉。数据不写入本地存储，刷新即丢。

哪一台用在哪

• 做饭、锻炼、上台讲话——用倒计时，五个档位一点就走，结束提示不容易错过。结束时刻必须准的场合，让标签页保持可见。
• 按块工作——用番茄钟，并且在开始一个阶段之前把时长设好，跑动中改不了。记住没有长休息：攒到四个番茄之后，把休息框临时改长一点。
• 要拿去当数字汇报的场合——用秒表，三台里只有它按时钟回算。规则书管得到的场合，再配一块硬件计时器。
• 期限压过便利的场合——三台都不合适。用系统时钟或闹钟；它们量的都是真实时间，只是其中两台用的是数数的方式。

常见问题

在别的标签页待了一会儿，倒计时怎么落后了？ 它是每 tick 减一秒，不是读时钟，而浏览器会节流后台标签页的定时器。计数还在走，只是比真实时间慢，而且切回来不会自己补。结束时刻要紧的话，重置后重新计时。

为什么秒表没这个问题？ 因为它每帧都重算「现在减去启动时刻」。标签页被节流时画面停更，但算式不受影响，下一帧就是真实总量。实测那 5 秒的空白表现为从 00:07.00 直接跳到 00:12.00。

番茄钟阶段结束后点「开始」怎么没反应？ 其实有反应——它把该阶段的时长重新填满，只是不启动，再点一次才开始。这是剩余量为 0 的边界：启动逻辑把结束了的阶段当成需要先重置。

我改了专注时长，计时还是按 25 分钟走。 输入框只在「重置」和切换模式时被读取，点「开始」不读。改完先重置再开始。倒计时同理，只有重置才会重新载入时长。

能设 90 分钟甚至 200 分钟专注吗？ 能，框上写着 120 也挡不住。min/max 属性在任何地方都没有被检查，填 200 会载入 12000 秒并显示 200:00。真正会退回默认值的只有三类输入：留空、填字母、填 0，它们都给你 25/5 的默认时长。

屏幕上那个 0-5:00 是怎么回事？ 某个框被填成了负数。分填 −5 或专注填 −5 都会载入负的秒数，而「分:秒」格式函数会给负的分钟数补前导零，于是显示成 0-5:00。倒计时在第一个 tick 就弹提示；番茄钟则直接拒绝启动，直到你把数字改回去。

计次是四舍五入还是截断？ 截断。显示的百分秒是向下取的，9.999 秒读作 00:09.99。更本质的限制是刷新间隔：一条计次最多比你按下的时刻早 20 毫秒。

按同样的节奏计次，为什么只有一行是绿的？ 多半因为那一段确实快了几毫秒，而第三条起页面会标出最快与最慢。如果所有分段严格相等，每一行都会被标成最快——判定先拿最小值做等值比较。

刷新之后这些还在吗？ 不在。三台页面都不写本地存储：倒计时回到 5 分钟，番茄钟回到 25/5 并且计数为 0，秒表回到 00:00.00 和空列表。

有键盘快捷键吗？ 没有。只能用按钮操作，空格和方向键保持浏览器的默认行为。