纯 HTML 无法动态显示时间，必须用 JS 每秒更新 <time> 标签的 textContent 和 datetime 属性；<time> 仅是语义化静态标签，不自动刷新；推荐 setInterval(updateTime, 1000) 并首次立即调用。
纯 HTML + JS 动态显示当前时间，核心就一条：HTML 只负责占位和语义，JS 负责取值、格式化、写入、刷新——没有“纯 HTML 实现动态”的可能，time 标签本身不会动。
为什么不能只用 <time> 标签实现动态更新
<time> 是语义化标签，仅用于标记静态时间点或区间（如文章发布时间），它的 datetime 属性和文本内容都是一次性写死的。浏览器不会主动刷新它，也不监听系统时钟。你看到的“动态效果”全靠 JS 每秒重写它的 textContent 或 innerHTML。
- 常见错误现象：
<time id="now">加载中</time>页面始终显示“加载中”，JS 未执行或 ID 写错 - 正确用法：把它当普通容器用，和
<div>或<p>无本质区别，只是加了语义和datetime属性便于机器读取 - 推荐初始化写法：
<time id="current-time" datetime="">--:--:--</time>，空datetime后续由 JS 补全
setInterval 每秒更新是最直接可靠的方案
对于绝大多数页面，setInterval(updateTime, 1000) 简单、稳定、兼容性好。它不追求毫秒级精准，但能保证用户感知上“秒针在走”。
- 必须先调用一次
updateTime()，否则页面首次加载会空白或显示占位符 - 不要用
setTimeout递归代替——容易因 JS 执行延迟导致时间跳变或累积误差 - 避免在
updateTime里做耗时操作（如 DOM 遍历、复杂计算），否则可能错过整秒更新点 - 示例关键片段：
function updateTime() { const now = new Date(); const timeStr = now.toLocaleTimeString("zh-CN", { hour12: false }); document.getElementById("current-time").textContent = timeStr; // 同步更新 datetime 属性（可选） document.getElementById("current-time").datetime = now.toISOString().slice(0, 19); } updateTime(); // 立即显示 setInterval(updateTime, 1000);
用 textContent 而不是 innerHTML 更新时间文本
时间字符串不含 HTML 标签，用 textContent 更安全、更快。它跳过 HTML 解析步骤，杜绝 XSS 风险，也避免意外触发样式重排。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
el.innerHTML = "<strong>" + timeStr + "</strong>—— 不必要且危险 - 正确写法：
el.textContent = timeStr，配合 CSS 控制加粗、颜色等样式 - 性能差异：在低端设备或大量时间组件场景下，
textContent更新速度明显快于innerHTML - 如果真要内嵌 HTML（比如加图标），应严格白名单过滤或使用模板字符串预定义结构，而非拼接用户可控内容
本地时间 vs UTC 时间：toISOString() 和 toJSON() 的坑
想把当前时间存进 datetime 属性供后续 JS 逻辑读取？别直接用 toISOString()，它返回的是 UTC 时间，和用户看到的本地时间不一致。
- 现象：页面显示“12:24:30”，但
datetime却是 “2026-08-26T04:24:30Z”（UTC+0），时区差 8 小时 - 修复方法：用
new Date().toLocaleString("sv-SE")（ISO 格式本地时间）或手动拼接：${y}-${String(m+1).padStart(2,'0')}-${String(d).padStart(2,'0')}T${h}:${String(min).padStart(2,'0')}:${String(s).padStart(2,'0')} - 更稳妥做法：只用
textContent显示本地时间，datetime属性留空或仅用于服务端注入的可信时间戳 - 注意：
toJSON()等价于toISOString()，同样返回 UTC
真正容易被忽略的点是：时间格式化函数（如 toLocaleTimeString）的行为依赖用户浏览器语言和时区设置，同一段代码在不同地区可能输出“12:24 PM”或“12:24”，甚至“午後12:24”。如果产品有强一致性要求，得放弃自动本地化，改用手动拼接并硬编码分隔符和顺序。
