最简可行方案是用 document.getElementById 获取 span 元素，配合 setInterval 每秒调用 update 函数更新 textContent，其中 new Date() 在回调内获取并手动补零格式化为 HH:MM:SS。
用 setInterval 每秒更新 <span> 内容
最简可行方案是直接操作 DOM 元素的 textContent，配合 setInterval 每秒刷新。不需要框架、不依赖外部库，原生 JS 即可完成。
关键点在于：时间格式化必须手动做，浏览器不自动补零；setInterval 的回调函数里要重新获取当前时间，不能复用初始值。
-
new Date()必须在定时器回调内部调用，否则只会显示页面加载时的时间 - 小时、分钟、秒小于 10 时需用
.toString().padStart(2, '0')补零，否则会显示9:5:3而非09:05:03 - 推荐用
<span id="clock"></span>作为挂载点，避免操作<body>或其他语义化元素
document.getElementById 是最稳妥的取元素方式
在页面底部（</body> 前）写脚本，或确保 DOM 加载完成后再执行，否则 getElementById 可能返回 null。不推荐用 querySelector 简写，因为兼容性略低且无必要。
如果脚本放在 <head> 中，必须包裹在 DOMContentLoaded 事件里，否则元素尚未解析，取不到节点。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
document.querySelector('#clock').textContent = ...（未判空，报错中断） - 正确做法：先
const el = document.getElementById('clock');，再if (el) { ... } - 更安全的写法是加一层存在性判断，防止因 ID 拼写错误或元素缺失导致脚本静默失败
避免用 innerHTML 更新纯文本内容
时间字符串不含 HTML 标签，用 textContent 更安全、更快。用 innerHTML 不仅多余，还可能引入 XSS 风险（虽然当前场景可控，但习惯要养好）。
另外，不要在定时器里反复创建 Date 对象以外的其他对象（如 Intl.DateTimeFormat），它开销较大，每秒新建会轻微影响性能。
- ✅ 推荐：
el.textContent = `${h}:${m}:${s}`; - ❌ 避免：
el.innerHTML = `<b>${h}</b>:${m}:${s}`;（无意义加粗，且破坏纯文本语义） - ⚠️ 注意：
toLocaleTimeString()默认行为受用户系统设置影响，比如可能显示 12 小时制，不适合需要统一格式的场景
完整可粘贴代码（含防错与补零）
<span id="clock"></span>
<script>
const el = document.getElementById('clock');
if (el) {
function update() {
const now = new Date();
const h = now.getHours().toString().padStart(2, '0');
const m = now.getMinutes().toString().padStart(2, '0');
const s = now.getSeconds().toString().padStart(2, '0');
el.textContent = `${h}:${m}:${s}`;
}
update(); // 立即执行一次，避免首秒空白
setInterval(update, 1000);
}
</script>
这段代码在所有现代浏览器中都能运行，包括 Safari 14+、Chrome 80+、Firefox 70+。唯一容易被忽略的是：如果页面长时间后台运行（比如切换到其他标签页），部分浏览器会节流 setInterval 到最低 1s 甚至更低频，导致时间跳变——这不是代码问题，而是浏览器策略，无法绕过。
