网页实时计时器

一个网页计时器，网页本质上是网页把“时间”这个抽象概念，变成了一段可观察、网页可操作的网页前端逻辑。我见过太多人把setInterval当成万能钥匙，网页结果页面切后台就卡死，网页或者时间越走越偏。网页真正可靠的网页实现，核心只有一个：**用时间戳差值计算，网页而不是网页累加计数。**
先看一个最常见的网页错误写法。新手喜欢这样： ```javascript let seconds = 0; setInterval(() => { seconds++; display(seconds); },网页 1000); ``` 这代码在电脑开着、页面聚焦时没问题。网页但你切到别的网页标签页，浏览器为了省资源，网页会降低定时器频率。等切回来，秒数可能慢了十几秒。更糟的是，手机锁屏再解锁，定时器直接暂停。用户看到的是一个撒谎的计时器——这比没有计时器更糟。
正确的做法是记录起始时间，每次刷新时读取当前时间戳，两者相减。比如： ```javascript const start = Date.now(); setInterval(() => { const elapsed = Math.floor((Date.now() - start) / 1000); display(elapsed); }, 250); ``` 注意这里的间隔设成了250毫秒而不是1000毫秒。为什么？因为定时器本身有微小误差，如果你每隔1秒才校正一次，误差会累积。用250毫秒轮询，即使某次触发晚了200毫秒，下一次也能及时补上。显示上，你只展示整秒数，用户根本感知不到中间那些微小的跳动。
这个方案还有个隐藏好处——它天然支持“暂停”功能。暂停时记录当前累计秒数，恢复时重新设定起始时间戳，把暂停前的值加上去就行。不需要额外维护一堆状态变量。我做过一个番茄钟项目，用这个思路，暂停、继续、重置三种操作总共只用了不到30行逻辑代码。
说回界面。计时器最忌讳数字跳来跳去。固定宽度、等宽字体是基本要求。你要是用普通字体，数字从9变10时，整个布局会左右晃动，用户眼睛得跟着追。我习惯给时间显示区域设置`font-variant-numeric: tabular-nums`，或者直接用等宽字体。另外，别把时间渲染成`00:00:00`这种冒号分隔的格式，不如拆成三个独立的数字块，中间用CSS间距控制。这样每秒变化时，只有个位数字在动，视觉上更稳定。
还有个细节很多人忽略——首次渲染的时机。如果你在页面加载后才启动定时器，用户看到的第一秒会延迟。应该在HTML解析时就计算好初始值，或者用`requestAnimationFrame`在下一帧立即执行一次显示更新。我习惯把显示函数和计算逻辑分开，初始化时先手动调用一次，再交给定时器。
最后提一嘴性能。setInterval在后台标签页会被浏览器节流，这是无法绕过的。如果你想做秒表那种精确到0.1秒的工具，就得用Web Worker或者`performance.now()`配合requestAnimationFrame。但对绝大多数网页场景——考试倒计时、直播活动、表单填写时长统计——时间戳差值方案已经足够。它简单、可靠、不依赖任何框架，原生JavaScript就能搞定。
下次有人跟你吹他的计时器用了什么复杂的状态管理库，你可以直接问他：页面切后台五分钟再回来，时间准不准？大概率他会愣住。而你的方案，从设计之初就绕开了这个坑。