HTML如何动态显示时间不跳转？局部刷新代码详解-html教程-PHP中文网

用textcontent+setinterval是最简可靠方案，避免跳秒、卡顿、xss和重绘风险，需立即初始化并用tolocaletimestring格式化。

html如何动态显示时间不跳转？局部刷新代码详解

直接用 setInterval 每秒调用 new Date() 并更新 textContent，就能稳定显示时间不跳转。关键不是“怎么动”，而是“怎么不动”——避免 DOM 重绘、事件丢失、XSS 和时钟跳秒。

为什么时间会跳转或卡顿

常见现象是：秒数突然从 12:34:59 跳到 12:35:01，或者页面切换标签页后回来时间滞后两秒。根本原因不是 JS 慢，而是更新逻辑没对齐浏览器刷新节奏，或用了不稳定的触发方式。

setTimeout 递归调用：每次执行完才设下一次，主线程卡顿时就会堆积延迟，导致跳秒
只在页面加载时执行一次 new Date()：比如写死在 HTML 里或没包进定时器，时间永远不变
用 innerHTML 更新纯文本容器：虽能用，但多此一举，还可能意外解析 HTML 字符（比如时间里含 ）
没处理页面隐藏状态：用户切走标签页时，setInterval 仍运行，但浏览器会节流，恢复后批量触发，造成时间错乱

用 `textContent` + `setInterval` 最简可靠方案

这是绝大多数场景的首选。它不依赖复杂 API，兼容性好（IE11+），且不会引入 XSS 或重绘风险。

Html To Pdf

使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。

下载

目标元素必须有唯一 id，例如 <div id="clock"></div>
格式化推荐用 toLocaleTimeString('zh-CN', { hour12: false })，中文系统下自动补零、用 24 小时制，英文系统也不会崩
不要手动拼接字符串再 padStart(2, '0') —— 看似可控，但 getMonth() 返回 0~11、getHours() 在 12 小时制下要额外判断，容易漏 case
初始化时立即调用一次函数，避免页面加载完成前空白 1 秒

function updateClock() {
  const now = new Date();
  document.getElementById('clock').textContent = 
    now.toLocaleTimeString('zh-CN', { hour12: false });
}
updateClock(); // 先显示一次
setInterval(updateClock, 1000);

需要更高精度时用 `requestAnimationFrame`

仅当你的页面已有大量动画、或要做毫秒级倒计时（如直播倒计时），才值得换。它本身不保证“每秒一次”，而是等下一帧渲染前执行，所以更顺滑、不丢帧，但需自己判断是否真过了一秒。

不能直接替换 setInterval，得加一个上一次更新的时间戳做比对
首次调用必须用 requestAnimationFrame(clockLoop) 启动，否则不执行
如果用户切走标签页，requestAnimationFrame 会被暂停，回来后自然续上，不会跳秒
别在循环里频繁调用 new Date() —— 每帧都调没问题，但若每帧都查服务端时间就废了

let lastUpdate = 0;
function clockLoop(timestamp) {
  if (timestamp - lastUpdate >= 1000) {
    const now = new Date();
    document.getElementById('clock').textContent = 
      now.toLocaleTimeString('zh-CN', { hour12: false });
    lastUpdate = timestamp;
  }
  requestAnimationFrame(clockLoop);
}
requestAnimationFrame(clockLoop);