最直接做法是用 setInterval 每秒调用 updateClock 函数更新时间，核心是 new Date() 获取本地时间、padStart 补零保证两位数格式、DOMContentLoaded 确保 DOM 就绪、textContent 替代 innerHTML 防 XSS。
用 setInterval 每秒更新 innerHTML 是最直接的做法
浏览器里显示实时时间，核心就两件事：获取当前时间、定时刷新。不用框架、不依赖外部库，setInterval 配合 new Date() 足够可靠。关键不是“能不能”，而是“怎么避免跳变和时区错乱”。
常见错误是直接拼接字符串后赋值，比如 document.getElementById('clock').innerHTML = h + ':' + m，但没补零会导致 9:5 这种显示，视觉上会抖动；另外没指定时区，用户换地区打开页面可能显示服务器时间而非本地时间。
- 始终用
toLocaleTimeString()或手动补零（String(n).padStart(2, '0')）保证两位数格式 - 时间获取必须基于
new Date()，它默认返回本地时区时间，不需要额外处理 - 间隔设为
1000毫秒，不要用500或100——人眼看不出区别，反而增加 CPU 负担
document.getElementById 选不到元素？检查 DOM 加载时机
把脚本写在 <head> 里却操作 <body> 中的元素，是新手最常遇到的报错：Cannot set property 'innerHTML' of null。浏览器从上到下解析 HTML，脚本执行时元素还没生成，自然找不到。
- 把
<script>标签移到</body>前面是最简单解法 - 或者用
DOMContentLoaded事件包裹初始化逻辑，确保 DOM 就绪再执行 - 别用
window.onload——它等所有资源（图片、CSS）加载完才触发，延迟明显
HTML 结构只要一个带 id 的容器就够了
不需要 class、不需要 data 属性、不需要额外 wrapper。时钟本质是纯文本渲染，语义化要求低，简洁结构反而更稳定。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
示例结构：
<div id="clock"></div>
对应 JS 中只需一行获取：const clockEl = document.getElementById('clock');。如果用了其他选择器（如 querySelector），要确认选择器写法完全匹配，比如 #clock 和 .clock 混用就会失败。
完整可运行代码（复制即用，含防抖与格式统一）
下面这段代码已规避常见坑：自动补零、DOM 就绪保障、无全局变量污染、单次初始化。
<div id="clock"></div>
<script>
function updateClock() {
const now = new Date();
const h = String(now.getHours()).padStart(2, '0');
const m = String(now.getMinutes()).padStart(2, '0');
const s = String(now.getSeconds()).padStart(2, '0');
document.getElementById('clock').textContent = `${h}:${m}:${s}`;
}
document.addEventListener('DOMContentLoaded', () => {
updateClock();
setInterval(updateClock, 1000);
});
</script>
注意 textContent 比 innerHTML 更安全，这里没有 HTML 插入需求，避免潜在 XSS 风险。如果后续要加样式（比如秒数红色），建议用 CSS 类控制，而不是往文本里塞 <span> 标签——那会破坏定时更新的稳定性。
真正容易被忽略的是：有些浏览器在标签页非激活状态时会节流 setInterval，导致秒数跳变（比如一次跳 2 秒）。这不是代码问题，是浏览器策略，如果业务强依赖精确秒级，得用 requestAnimationFrame + 时间戳校准，但日常展示完全没必要。
