应使用标签配合js仅更新textcontent，避免innerhtml或document.write破坏结构；datetime属性须由构建流程注入真实时间戳，定时器每小时更新一次并监听visibilitychange确保可见时刷新。
直接用 <time></time> 标签 + 纯 JS 更新 textContent，不重写 HTML、不污染语义、不触发意外重排。
为什么不能用 innerHTML 或 document.write 动态写入底部时间
常见错误是把整个底部 HTML 字符串拼好再塞进 footer 元素里，比如：footer.innerHTML = "<p>更新于 " + timeStr + "</p>"。这会清空原有子节点（可能含链接、版权信息、脚本绑定），还可能破坏无障碍结构。更糟的是，document.write 在页面加载完成后调用会直接覆盖整个文档。
正确做法只替换时间文本本身：
- HTML 中预先写好带
datetime属性的<time></time>标签，例如：<time datetime="2026-08-26T13:33:00+08:00" id="last-updated">2026年8月26日</time> - JS 仅读取该元素，调用
textContent更新显示文案，不碰 HTML 结构 - 确保
datetime值是真实构建/发布时的时间戳，不是运行时生成的——否则搜索引擎和屏幕阅读器拿到的是“此刻”，不是“上次更新”
setInterval 每小时更新一次就够了
底部“更新时间”本质是静态元信息，不是实时钟表。每秒刷新毫无意义，反而增加 CPU 负担；每分钟也不必要——人眼根本感知不到分钟级变化。
实操建议：
- 用
setInterval(updateFooterTime, 60 * 60 * 1000)，即每小时执行一次 - 函数内先检查
document.visibilityState === 'visible'，页面切后台时跳过更新，避免唤醒被节流的定时器 - 更新逻辑只做两件事：解析
new Date()得到当前日期，格式化为中文“YYYY年M月D日”，再赋给document.getElementById('last-updated').textContent - 别在定时器里重复解析
datetime属性——它只是存档值，不用动
移动端切后台后时间不准？加 visibilitychange 监听
Chrome 和 Safari 在标签页不可见时会大幅降低 setInterval 频率（最低可至 10 分钟一次）。用户切回来发现底部时间还停在“2026年8月26日”，其实已过去几小时。
补救方案很简单：
- 监听
document.addEventListener('visibilitychange', () => { if (!document.hidden) updateFooterTime(); }) - 这样只要页面重新可见，立刻强制刷新一次，保证显示时间与用户感知一致
- 不需要额外判断是否“刚切回来”——每次可见都更新，逻辑最简，也最可靠
真正容易被忽略的是：这个“更新时间”必须由构建流程注入，而不是靠 JS 运行时生成。如果 CMS 或静态站点生成器输出时没填对 datetime，JS 再怎么更新 textContent，机器可读的时间语义就永远错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
