最稳妥方案是用Date对象结合setInterval每秒调用updateClock函数，通过textContent更新DOM，使用toLocaleTimeString('zh-CN', {hour12: false})格式化输出，脚本置于</body>前并确保元素已加载。
直接用 Date 对象 + setInterval 是最稳妥、兼容性最好、也最容易调试的方案；其他方法要么有兼容性风险（如 requestAnimationFrame 在部分旧浏览器中行为不一致），要么引入额外复杂度（如 Web Components），对简单时间显示属于过度设计。
用 setInterval 每秒更新 textContent（推荐首选）
这是绝大多数生产环境采用的方式：稳定、可预测、无兼容问题。关键不是“每秒执行”，而是“每次执行都重新生成完整时间字符串”，避免累积误差。
- 必须把脚本放在
</body>前，或监听DOMContentLoaded，否则document.getElementById可能找不到元素 - 优先用
textContent而非innerHTML，防止意外 HTML 注入，也更快 - 不要写
setInterval("xxx", 1000)这种字符串形式——它会触发eval，有安全和性能隐患 - 示例片段：
function updateClock() { const now = new Date(); document.getElementById('clock').textContent = now.toLocaleTimeString('zh-CN', { hour12: false }); } updateClock(); setInterval(updateClock, 1000);
用 toLocaleTimeString 控制时区与格式（别硬拼字符串）
手动调用 getHours()、getMinutes() 再拼接，看似可控，实则埋了三个坑：时区错乱、夏令时跳变、本地习惯不符（比如德国用 24 小时制但分隔符是点）。交给 Intl API 更可靠。
-
toLocaleTimeString('en-US')输出10:48:22 AM，zh-CN输出上午10:48:22，无需手动判断 AM/PM - 加
{ timeZone: 'Asia/Shanghai' }可强制显示东八区时间，不受用户系统设置影响 - 若需同时显示日期和时间，用
toLocaleString()，而非拼两个toLocaleTimeString+toLocaleDateString - 注意：
toLocaleTimeString返回的是字符串，不是Date实例，不能链式调用
用 requestAnimationFrame 替代 setInterval？慎用
它确实更“顺滑”，但只在一种场景下真正必要：你需要毫秒级精度（比如倒计时动画），且页面始终处于前台活跃状态。对普通时钟，反而容易出问题。
立即学习“前端免费学习笔记（深入）”；
- 它不保证每秒执行一次——如果页面被切换到后台，
requestAnimationFrame会被暂停或节流，导致时间“卡住” - 必须自己对比上一次的秒数，仅当变化时才更新 DOM，否则会高频刷屏但内容不变
- 需要额外逻辑处理首次渲染、暂停恢复、页面可见性（
visibilitychange事件） - 老版本 Safari 和某些 Android WebView 对该 API 的支持不一致，降级处理成本高
为什么不用 datetime-local 输入框显示时间？
<input type="datetime-local"> 是表单控件，只用于用户输入，**不能用于展示动态时间**。它的值必须由用户手动选择或 JS 设置（且格式严格为 YYYY-MM-DDTHH:MM），无法自动刷新，也不支持秒级显示。
- 试图用
input.value = new Date().toISOString().slice(0, 16)设置后，用户点击仍会弹出原生时间选择器，体验割裂 - 它的样式完全由浏览器控制，无法用 CSS 精确定制字体、颜色、大小
- 若只是展示，用
<time>标签 +datetime属性语义更清晰，也更轻量
真正容易被忽略的点是：时间显示是否要跟随用户系统语言/时区，还是固定服务端时区。前者用 toLocaleTimeString() 即可；后者必须显式传入 timeZone 选项，并确认该时区名在目标浏览器中被支持（例如 Etc/GMT-8 并非所有环境都识别，优先用 Asia/Shanghai）。
