最稳妥方案是用 setinterval 每秒调用 new date() 并通过复用 intl.datetimeformat 实例格式化时间，首次立即执行，确保不卡顿、时区正确、无闪烁且兼容夏令时与本地化。
用 setInterval 每秒更新 <span id="time"></span> 的内容
直接操作 DOM 元素比重绘整个页面轻量，也避免闪烁。关键不是“动态”，而是“不卡顿+时区正确”。setInterval 是最稳妥的选择，别用 setTimeout 递归——稍有延迟就会越积越多。
常见错误：用 new Date().toLocaleString() 直接塞进页面，结果本地时区错乱、格式不可控（比如中文系统里出现“上午”但后端要 ISO 格式）。
- 始终基于
new Date()实例计算，不要依赖字符串解析 - 把格式化逻辑单独抽成函数，方便改样式或加秒表功能
- 首次渲染立刻执行一次，避免页面打开后等 1 秒才显示时间
格式化时优先用 Intl.DateTimeFormat 而非 getHours() 拼接
Intl.DateTimeFormat 自动处理夏令时、24 小时制偏好、月份缩写本地化，而手拼 date.getHours() + ':' + date.getMinutes() 在 iOS Safari 上可能返回 12 小时制却没 AM/PM，导致下午 2 点显示成 “14:00” 或 “2:00” 不一致。
示例（显示“14:23:05”）：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
const formatter = new Intl.DateTimeFormat('en-US', {
hour12: false,
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
});
// 后续每次调用 formatter.format(new Date()) 即可
注意 setInterval 的回调执行时机偏差
浏览器无法保证 setInterval(fn, 1000) 精确每秒触发——如果上一次回调耗时 80ms，下一次就晚了 80ms；连续慢几次，时间就明显落后真实时间。
解决方法是每次取当前 new Date()，而不是靠计数器累加：
- ❌ 错误：用
let sec = 0; setInterval(() => { el.textContent = ++sec; }, 1000) - ✅ 正确：每次都在回调里调用
new Date()，哪怕间隔略不均匀，显示值永远真实 - 性能提示：
Intl.DateTimeFormat实例可复用，不要在回调里重复 new
嵌入页面时确保 <span id="time"></span> 已存在且无 CSS 隐藏
容易被忽略的坑：DOM 元素还没加载完就运行脚本，或 CSS 写了 #time { display: none; } 却忘了删。建议把脚本放在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
