日期时间 本地计算 开箱即用 内置示例 不留痕迹

倒计时器

用步进器或快捷档设定时分秒，点「开始」倒数；剩余时间精确到百分秒，进度条同步消耗，归零后页面提示「时间到」。

泡面要 3 分钟、开会发言限 5 分钟、午休定 20 分钟——这些小事不值得打开手机闹钟层层设置，一个网页就够。设好时分秒点开始，剩下的交给进度条：走到哪看一眼就知道，归零会提示。计时不靠逐秒累加，压到后台再切回来也是准的。

实现口径：计时基于「目标时刻 = 开始时刻 + 设定时长」的绝对时间差，而不是每秒减一的累加——后者在标签页被浏览器节流时会越走越慢。所以即使页面在后台被暂停渲染，切回前台时剩余时间会立即校正到正确值，不会累计误差。

—

使用步骤

  1. 用步进器或快捷档设定时分秒（步进改值不自动开始）。
  2. 点「开始」倒数；随时「暂停」「继续」，「重置」归零。
  3. 看进度条与百分秒；切走标签页不影响准确性。
  4. 归零后页面提示「时间到」；需要重复计时再点重置。

计算原理与示例

时长怎么设

用「时 / 分 / 秒」三个步进器设定时长（时 0~99，分秒 0~59），或直接点 1/3/5/10/25 分钟快捷档；输入时下方实时预览剩余时长。

开始后能暂停吗

点「开始」倒数，再点一次「暂停」；暂停后点「开始」从剩余时间继续。运行中输入框会锁定，防止误改。

归零后会发生什么

剩余时间归零后显示「时间到」标签并弹出提示；点「重置」清空状态重新设定。

代码示例

JavaScript 不漂移的倒计时：锚定绝对时刻 

let endAt = 0, raf = 0;
function start(seconds) {
  endAt = performance.now() + seconds * 1000;
  tick();
}
function tick() {
  const remain = Math.max(0, endAt - performance.now());
  render(remain);                       // 每帧校正，不累加误差
  if (remain > 0) raf = requestAnimationFrame(tick);
}
// 标签页后台节流时 rAF 暂停，切回前台立即校正到正确值

JavaScript 反例：每秒减一会越走越慢 

// 后台标签页 setInterval 被节流到 1 次/秒以上间隔，
// 且回调执行耗时会计入误差：
let left = 60;
setInterval(() => { left--; render(left); }, 1000);  // 会漂移

// 正确做法见左例：记录 endAt，每帧用 now 反推剩余，
// 节流只影响渲染频率，不影响时间准确性

常见问题

和倒计时计算器有什么区别？

倒计时计算器算「距离某个目标时刻还剩多久」（如考试、跨年）；本工具是「设一段时长倒数」（如 25 分钟番茄钟），不需要目标日期。

时间到了会响铃吗？

页面内会显示「时间到」标签并弹出提示。浏览器限制网页在未交互时发声，建议保持页面在前台，看到提示即可。

暂停后再开始会重置吗？

不会。暂停记录剩余时间，再点「开始」从剩余时间继续倒数；只有「重置」才清空。

25 分钟快捷档是番茄钟吗？

25 分钟正是经典番茄钟的单个专注时长，点一下就能开始一个番茄钟；配合 5 分钟档可以做工间休息。

最长能设多久？

99 小时 59 分 59 秒。时、分、秒分别不能超过 99 / 59 / 59。

切到别的标签页还准吗？

准。剩余时间按「结束时刻 − 当前时刻」计算，切走再回来不会漏秒；但浏览器可能冻结后台页面的刷新，建议保持前台。

能同时开多个倒计时吗？

一个页面只跑一个。需要多个计时请开多个标签页，每个标签页独立计时互不影响。

延伸阅读

来自本站原创文章，讲清这个工具背后的算法与口径。