用 setInterval 每秒调用 new Date() 更新 DOM 实现动态时钟，需在回调内创建时间实例、用 toLocaleTimeString('zh-CN', {hour12: false}) 格式化，并确保 HTML 有 id="clock" 元素且 CSS 不隐藏内容。
用 setInterval 每秒更新时间最直接
浏览器里实现动态时钟，核心就是定时读取当前时间并刷新 DOM。不用框架、不依赖第三方库，setInterval 配合 new Date() 就够用。注意别用 setTimeout 递归调用——容易因执行延迟导致跳秒或累积误差。
常见错误是把 new Date() 写在 setInterval 外面，结果时间只取了一次，页面永远显示初始值：
const now = new Date(); // ❌ 错！只执行一次
setInterval(() => {
document.getElementById('clock').textContent = now.toLocaleTimeString();
}, 1000);
正确做法是每次回调里重新创建实例：
-
setInterval的回调函数内必须调用new Date() - 推荐用
toLocaleTimeString('zh-CN')避免英文 AM/PM - 如果只要时分秒，传
{ hour12: false }确保 24 小时制
HTML 结构要预留 id 且避免内联样式干扰
时钟内容靠 JS 注入，所以 HTML 里得有个明确锚点。别用 class 或 data- 属性代替 id，document.getElementById 最快也最稳妥。
立即学习“前端免费学习笔记（深入）”；
容易被忽略的是 CSS 对 <time></time> 或 <span></span> 的默认样式影响，比如某些重置样式会设 font-size: 0 或 visibility: hidden，导致文字看不见。建议显式设置：
- 给目标元素加
id="clock"，例如<div id="clock"></div> - 确保其父容器没设
overflow: hidden或裁剪类样式 - 初加载时可先写个占位文本，比如
<div id="clock">--:--:--</div>，避免白屏
秒针“抖动”或跳变？检查系统时间精度和渲染时机
肉眼可见的跳秒（非平滑过渡）不是 bug，而是浏览器对 setInterval(1000) 的实际执行间隔通常在 980–1020ms 之间浮动，加上 JS 执行+DOM 更新耗时，会导致视觉上偶尔卡半拍。
如果你需要更稳的节奏，可以改用 requestAnimationFrame + 时间差计算，但对普通时钟属于过度设计。真正该排查的是：
- 有没有其他长任务阻塞主线程（比如未优化的循环、同步 AJAX）
- 是否在开发者工具里启用了“CPU 节流”，它会让定时器大幅降频
- 某些旧版 iOS Safari 对
setInterval小于 1000ms 的处理异常，但 1000ms 是安全的
另外，别用 Date.now() % 1000 去算毫秒偏移来“插值”，Web 页面没有亚秒级渲染保证，反而增加复杂度。
部署后时间不准？别依赖客户端本地时钟
用户电脑时间错了，你的时钟就跟着错——这是前端时钟的天然限制。如果业务需要强一致性（比如倒计时、预约提醒），必须和服务端时间对齐。
简单方案是在页面加载时发一次 fetch('/api/time') 拿服务器返回的 Unix 时间戳，然后用它作为基准，再用 setInterval 做本地增量。但要注意：
- HTTP 请求有延迟，拿到的时间戳需减去 RTT 估算值（粗略可用
Date.now() - startTimestamp） - 后续每秒更新时，用「服务端基准时间 + 已过毫秒数」计算，而非反复请求
- 若只是展示用途（如页脚小钟），本地时间完全够用，强行对接反而引入失败风险
真实项目里，多数“不准”其实源于用户自己关了自动校时，或者虚拟机里时钟漂移——这种问题前端无解，得靠提示文案引导用户检查系统设置。
