应使用 setInterval 结合时间戳差值计算更新时钟，避免 DOM 频繁查找和定时器冻结问题，并用 toLocaleString() 统一格式化、检测时区支持、监听页面可见性及时清理定时器。
直接用 setInterval 每秒调用 new Date() 就行，但必须注意 DOM 查找时机和更新方式
页面一加载就定格在初始时间？那大概率是脚本执行时 document.getElementById('clock') 返回了 null。原因通常是 <script></script> 放在 里，而目标元素还没解析到。
正确做法是：把 <script></script> 移到 前，或用 DOMContentLoaded 包裹初始化逻辑。别在 setInterval 回调里反复查 DOM——每次调用都执行 document.getElementById 属于冗余操作，也容易因元素缺失抛错。
- 确保 HTML 中有明确的容器，比如
<div id="clock"></div> - 先用
const clock = document.getElementById('clock')获取一次，存为变量 - 更新时只操作
clock.textContent，不用innerHTML（除非你真要渲染 HTML） - 首次调用
updateClock()再启动定时器，避免首屏空白 1 秒
toLocaleTimeString() 看似方便，但时区和兼容性得手动兜底
默认调用 new Date().toLocaleTimeString() 显示的是用户本地时区时间，多数场景下这正是你想要的。但如果页面面向全国用户，又要求统一显示北京时间（东八区），就不能依赖浏览器自动判断。
加 { timeZone: 'Asia/Shanghai' } 参数能强制指定时区，但 IE 和部分旧版 Android 浏览器不支持这个选项，会直接报错或忽略。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 安全写法是先检测支持性：
if (Intl && typeof Intl.DateTimeFormat !== 'undefined') - 不支持时退回到手动计算偏移：
new Date(Date.now() + 8 * 60 * 60 * 1000) - 避免用
toUTCString()或toISOString()直接显示——它们返回的是 UTC 时间，不是用户看到的“系统时间”
移动端切后台或键盘弹出时，setInterval 可能被节流甚至暂停
Android 和 iOS 在页面不可见（比如切到其他 App、锁屏）时，会大幅降低 setInterval 的执行频率，甚至完全冻结。结果就是时间跳秒、卡顿，或者恢复可见后突然刷新一大段。
这不是 bug，是浏览器主动省电行为。如果你需要更稳的节奏，得靠时间差推算，而不是依赖定时器精度。
- 记录上一次更新的真实时间戳：
let lastTime = Date.now() - 在回调里算差值：
const now = Date.now(); if (now - lastTime >= 1000) { /* 更新 */ lastTime = now; } - 这样即使定时器延迟了 3 秒，也只补一次更新，不会连跳三秒
- 配合
visibilitychange事件，在页面重新可见时立刻同步一次
想显示日期+时间，别拼字符串，用 toLocaleString() 更可靠
手动调用 getFullYear()、getMonth()、getDate() 等方法拼接 “2026年8月26日 星期三 10:17:30”，看着直观，但月份要 +1、星期要映射中文、还要补零——代码冗长且易错。
toLocaleString() 能自动适配用户系统语言和地区设置，比如中文用户看到 “2026/8/26 上午10:17:30”，英文用户看到 “8/26/2026, 10:17:30 AM”。它还内置了时区处理逻辑，比手算干净得多。
- 完整格式示例：
new Date().toLocaleString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long', hour: '2-digit', minute: '2-digit', second: '2-digit' }) - 注意：
month: 'long'输出 “八月”，'numeric'才是 “8” - 如果只需要时间部分，用
toLocaleTimeString()；只要日期，用toLocaleDateString()
最常被忽略的点其实是页面生命周期管理：没人关掉定时器，setInterval 会一直跑着，哪怕用户已经离开这个 tab。真要严谨，得监听 beforeunload 或 visibilitychange 清理定时器 ID。
