最简方案是用 setinterval 每秒调用 textcontent 更新 dom，提前缓存元素引用，使用 tolocaletimestring('zh-cn', {hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit'}) 格式化并适配本地时区，添加 aria-live="polite" 提升可访问性。
直接用 new Date() 动态更新页面时间，最简方案是配合 setInterval 每秒刷新一次，但要注意避免重复绑定、时区错位和 DOM 查找开销。
用 setInterval + textContent 实现每秒更新
这是前端最常见、兼容性最好、不依赖框架的写法。核心是获取当前时间对象，格式化为字符串，再写入指定元素。
- 必须用
textContent（不是innerHTML）防止 XSS 风险，除非你明确需要渲染 HTML - 不要在循环里反复调用
document.getElementById，应提前缓存 DOM 引用 - 格式化建议用
toLocaleTimeString()，它自动适配用户本地时区和语言习惯，比手拼getHours()+getMinutes()更可靠
示例：
const clockEl = document.getElementById('clock');
function updateClock() {
clockEl.textContent = new Date().toLocaleTimeString();
}
updateClock();
setInterval(updateClock, 1000);
为什么不用 setTimeout 递归代替 setInterval
表面上看，setTimeout 递归更“精确”，能避免 setInterval 可能累积的延迟。但实际在时间显示场景中，没必要。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 人眼无法分辨 10ms 级别的误差，而
setInterval在现代浏览器中调度精度足够 - 递归写法容易因异常中断导致时间停止更新，且调试更难
- 如果页面被切换到后台标签页，浏览器会节流
setInterval（通常降到 1s 间隔），这反而是合理行为——用户看不见，没必要狂刷
toLocaleTimeString 的关键参数差异
默认行为可能不符合你的需求，比如显示秒、24 小时制、或强制中文环境。
- 加
{ hour12: false }强制 24 小时制：new Date().toLocaleTimeString('zh-CN', { hour12: false }) - 想始终显示秒，即使系统设置隐藏了秒，需显式传
second: '2-digit' - 不传 locale（如
'zh-CN'）时，结果依赖用户浏览器设置，可能在测试机上正常，上线后变英文
稳妥写法：
new Date().toLocaleTimeString('zh-CN', {
hour12: false,
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
});
容易被忽略的性能与可访问性细节
看似简单的时钟，几个小疏忽会让它在真实项目中出问题。
- 如果页面有多个时钟（比如页头一个、侧边栏一个），别共用同一个
setInterval回调——应统一管理 timer ID，避免重复启动或内存泄漏 - 屏幕阅读器对频繁变动的文本敏感，建议给时钟容器加
aria-live="polite"，让辅助技术平滑播报，而不是疯狂打断用户 - 服务端渲染（SSR）页面首次加载时，客户端时间可能比服务端时间快/慢几秒，若需强一致，得靠时间同步接口校准，纯前端无法解决
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
