倒计时器

倒计时器是一种从指定时长开始递减到零的时间控制工具，适合专注学习、厨房烹饪、运动间歇、课堂活动、会议控时、演讲排练等需要固定时间盒的场景。它和秒表不同：秒表从零开始向上记录已经过去多久，而倒计时强调“还剩多久”和“什么时候结束”。清晰的剩余时间能帮助人控制节奏，避免拖延或超时。本页面还提供秒表和多计时器模式，可同时满足计次、分段和多个小任务并行计时。需要注意，计时依赖当前打开的浏览器标签页，重要提醒时应保持页面可用。

倒计时引擎不使用 setInterval(callback, 1000) 作为权威时钟——这种方式会累积漂移，因为 HTML5 事件循环规范只保证最小延迟，而非固定节奏。取而代之的是，页面通过 Date.now()（或使用 performance.now() 获得亚毫秒级精度）记录 startTime，每次 tick 计算 remaining = targetDuration - (Date.now() - startTime)。显示刷新由 requestAnimationFrame 驱动，浏览器将其限制为显示器的 vsync 刷新率（通常为 60 Hz / 16.67 毫秒，高刷新率笔记本和手机上有时为 120 Hz）。这种自校正设计即使在 JavaScript 任务队列因垃圾回收或长时间布局而阻塞时，也能保持显示的秒数与实际时钟同步。 后台节流是计时器意外的主要来源。根据 HTML 活动标准，隐藏标签页会将 setInterval/setTimeout 的最小间隔限制为 1000 毫秒（Chrome、Firefox、Safari 各自使用不同的启发式实现；Chrome 在电池供电约 5 分钟后还会冻结非活动标签页）。Page Visibility API（document.visibilityState、document.hidden、visibilitychange 事件）让计时器能够检测标签页切换，并在标签页重新可见时根据 Date.now() 校准内部时钟。倒计时结束的提示音通过 Web Audio API 播放（AudioContext + OscillatorNode 或预加载的 AudioBuffer），在 iOS Safari 和现代 Chrome 上需要先通过用户手势激活以满足自动播放策略。同时还会渲染可视提醒作为辅助手段，如果用户之前已授予权限，还可通过 Notification API 发送操作系统级的桌面通知。 多计时器模式将每个计时器保存在独立的状态对象中，各自拥有独立的 startTime；单个 requestAnimationFrame 循环每帧遍历整个数组，而非为每个计时器启动独立的 interval，这使得 CPU 工作量随计时器数量增加保持平稳。跨页面刷新的持久化使用 localStorage 存储序列化的 endTime，因此页面可以在挂载时重新计算剩余时间。需要注意的是，操作系统的时钟校正（手动修改时间、NTP 阶跃调整或夏令时切换）会瞬间改变 Date.now() 的值，可能导致恢复后的计时器出现跳变——performance.now() 是单调的，在单次页面加载内仅关注经过时间时更为适用。

• 使用 Date.now() 或 performance.now() 作为时间基准；永远不要依赖累积的 setInterval 计数。
• requestAnimationFrame 将重绘频率限制为显示器 vsync（60 Hz ≈ 16.67 毫秒；120 Hz ≈ 8.33 毫秒）。
• 隐藏标签页按 HTML 规范将 setInterval 节流至最低 1000 毫秒；Chrome 在电池供电约 5 分钟后可能冻结页面。
• Page Visibility API（visibilitychange 事件）是标签页返回前台时校准计时器的钩子。
• Web Audio API 在 iOS Safari 和 Chrome 上需要先通过用户手势激活，以满足自动播放策略。
• Notification API 需要 Notification.requestPermission() 和安全上下文（HTTPS 或 localhost）。
• performance.now() 在 NTP 调整和夏令时跳变时是单调的；Date.now() 则不是——请根据需求选择。