HTML中实现动态显示时间其实很简单-html教程-PHP中文网

tolocaletimestring()更安全，因浏览器自动处理时区、12/24小时制、am/pm及本地化细节，避免手动拼接漏补零、错用时区或兼容性问题；setinterval存在精度低、后台降频、跳秒等缺陷，推荐requestanimationframe+时间差校准方案。

html中实现动态显示时间其实很简单

直接用 setInterval 配合 new Date() 就能实时更新，但多数人卡在格式化和时区上。

为什么 `toLocaleTimeString()` 比手动拼接更安全

浏览器自动处理本地时区、12/24小时制、AM/PM、千位分隔符等细节，避免手写逻辑漏掉 getHours() 补零或夏令时偏移问题。比如中国用户不会意外显示成 UTC 时间，日本用户也不会错用英文缩写。

推荐写法：new Date().toLocaleTimeString('zh-CN', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' })
慎用手动拼接：date.getHours() + ':' + date.getMinutes() —— 少了补零（如 9:5）和时区转换，容易在 Safari 或低版本 Edge 中出错
注意：若需固定 UTC 时间，改用 toUTCString() 并截取时间部分，别依赖 toLocaleTimeString() 的 timeZone 选项（兼容性差）

`setInterval` 的间隔设成 1000ms 仍有跳秒问题

因为 JS 定时器不精确，加上函数执行耗时、页面失焦暂停等因素，实际回调可能延迟几十毫秒，导致秒数“卡住”或“连跳”。尤其在后台标签页中，Chrome 会把间隔拉长到 1s 以上。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

解决办法：不用 setInterval 倒推，改用 requestAnimationFrame + 时间差校准
简单可靠方案：每 100ms 触发一次，只在秒数真正变化时更新 DOM（减少重排）

示例逻辑：

function updateClock() {
  const now = new Date();
  const seconds = now.getSeconds();
  if (seconds !== lastSeconds) {
    el.textContent = now.toLocaleTimeString(...);
    lastSeconds = seconds;
  }
  requestAnimationFrame(updateClock);
}