HTML怎么做计时器_html计时器功能实现方法【从零开始】-html教程-PHP中文网

核心是用整数变量存剩余秒数并每秒自减1，配合clearinterval精准终止；禁用时间戳计算以防休眠跳变；暂停恢复需保存remainingseconds状态，防重复启动和竞态。

html怎么做计时器_html计时器功能实现方法【从零开始】

怎么用 `setInterval` 实现基础倒计时

核心就是靠 setInterval 定期减 1，配合 clearInterval 停止。别直接用 setTimeout 递归，容易因渲染延迟累积误差。

常见错误是把时间戳当剩余秒数用，比如 Date.now() 减去开始时间再除 1000 —— 这在页面切后台或系统休眠时会跳变，倒计时不准确。

用一个整数变量（如 secondsLeft）存剩余秒数，每次 setInterval 里自减 1
间隔设为 1000 毫秒，不是 999 或 1001，避免人为漂移
倒计时结束必须调用 clearInterval，否则定时器持续运行，内存泄漏+逻辑错乱

let secondsLeft = 60;
const timerId = setInterval(() => {
  secondsLeft--;
  document.getElementById('timer').textContent = secondsLeft;
  if (secondsLeft <h3>为什么 <code>requestAnimationFrame</code> 不适合做精确倒计时</h3><p><code>requestAnimationFrame</code> 的触发时机依赖屏幕刷新率（通常 60fps），且页面不可见时会被浏览器暂停。它适合动画帧同步，但不适合秒级精度的倒计时。</p><p>典型表现：切换标签页再切回来，倒计时“卡住”几秒后突然跳变；或者在低端设备上每帧间隔不稳定，导致倒计时忽快忽慢。</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
														src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a>
													<p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>

如果硬要用，得配合 Date.now() 计算真实流逝时间，代码变复杂，得不偿失
真要兼顾性能和精度，还是用 setInterval + 时间戳校准（比如每 10 秒比对一次系统时间）
移动端 WebView 中，requestAnimationFrame 暂停行为更激进，风险更高

如何让倒计时在页面隐藏时仍准确（不跳秒）

浏览器对后台标签页的 setInterval 有节流策略（最低 1s 一次），但实际可能被压到 1000ms 以上，导致倒计时变慢。解决思路是「视觉倒计时」和「逻辑倒计时」分离。

启动时记录目标时间点（如 endTime = Date.now() + 60000）
定时器只负责更新 UI，每次读取 Math.max(0, Math.floor((endTime - Date.now()) / 1000))
这样即使定时器被节流，下次唤醒时也能立刻修正显示，不丢失秒数
注意：不能全靠这个，仍需 visibilitychange 事件监听页面显隐，避免用户切回时 UI 卡顿

const endTime = Date.now() + 60000;
const timerId = setInterval(() => {
  const remaining = Math.max(0, Math.floor((endTime - Date.now()) / 1000));
  document.getElementById('timer').textContent = remaining;
  if (remaining === 0) clearInterval(timerId);
}, 1000);
document.addEventListener('visibilitychange', () => {
  if (!document.hidden) {
    // 页面重新可见时强制刷新一次，防止 UI 滞后
    const remaining = Math.max(0, Math.floor((endTime - Date.now()) / 1000));
    document.getElementById('timer').textContent = remaining;
  }
});