不能在<head>中动态显示时间，因为<head>不参与渲染，所有可见时间必须放在<body>顶部；正确做法是用DOMContentLoaded确保DOM就绪，配合visibilitychange防切页跳变，并用textContent更新、padStart补零。
直接在 <head> 里无法动态显示时间 —— 浏览器不允许在 <head> 中执行 DOM 更新或插入实时内容。 所有“网页头部显示时间”的需求，实际都是指页面 <body> 顶部（视觉上的“头部”），而非 HTML 结构中的 <head> 标签内。
为什么不能把时间写进 <head>
HTML 的 <head> 只负责元信息、样式、脚本声明等，不参与页面渲染内容的输出。即使你在 <head> 里放 <script>，它也只能操作 <body> 内的元素；你无法用 document.title 或 <meta> 实时更新“可见时间”，因为它们不渲染为用户可见的文本块。
-
document.title虽可改，但只影响浏览器标签页标题，不是“页面头部”的视觉区域 -
<meta name="date">是静态描述，不会被解析成页面上可读的时间文本 - 试图在
<head>内写<div id="time"></div>是无效 HTML，多数浏览器会自动将其移到<body>开头
正确做法：在 <body> 顶部放容器 + JS 动态更新
你要的“网页头部时间”，本质是放在 <body> 最上方的一个视觉区块。关键点是：容器位置要对、更新逻辑要稳、避免重复绑定。
- HTML 中定义一个带
id的元素，例如：<header id="page-header"><div id="clock">--:--:--</div></header> - JS 必须等 DOM 加载完成再执行，推荐用
DOMContentLoaded事件，而不是把<script>放在<head>里且没加defer - 使用
textContent而非innerHTML更新时间，防止意外解析 HTML 字符，也更快 - 格式化时注意补零：
String(date.getHours()).padStart(2, '0')，否则可能出现9:5:3这种格式
setInterval 每秒刷新的典型陷阱
看似简单，但线上常出问题：秒数跳变、切后台后恢复不准、多个定时器叠加。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 浏览器在标签页不可见时会节流
setInterval，Chrome 可能降频到 1 分钟一次，导致回来时秒数“突跳” - 没保存定时器 ID，就无法在页面卸载前调用
clearInterval，长期驻留造成内存泄漏 - 脚本被重复加载（比如 SPA 页面路由复用组件但没清理旧定时器），会导致多个
setInterval同时运行，时间疯狂刷屏 - 不要设
setInterval(..., 500)或更小值 —— 秒级精度完全够用，高频更新纯属浪费 CPU 和重排
推荐最小可用实现（含 visibilitychange 防跳变）
这段代码可直接贴进 <body> 底部，兼容所有现代浏览器：
<div id="clock">--:--:--</div>
<script>
const clockEl = document.getElementById('clock');
let timerId = null;
function updateTime() {
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');
clockEl.textContent = `${h}:${m}:${s}`;
}
function startClock() {
updateTime();
timerId = setInterval(updateTime, 1000);
}
function stopClock() {
if (timerId) clearInterval(timerId);
}
document.addEventListener('DOMContentLoaded', startClock);
document.addEventListener('visibilitychange', () => {
if (document.hidden) stopClock();
else startClock();
});
</script>
真正容易被忽略的是 visibilitychange 处理 —— 用户切走又切回时，仅靠 setInterval 很难保证秒数连续；必须手动停启，再触发一次 updateTime() 补帧。
