用 requestanimationframe + 时间差计算并手动拼接补零的 "hh:mm:ss" 字符串可避免跳秒、倒跳、格式错乱；需对齐整秒、规避 tolocaletimestring() 的 locale 依赖和 setinterval 的阻塞问题。

直接用 setInterval 配合 new Date() 就能实时更新，但不加防抖或格式校验，页面一卡时间就跳变、秒数错位很常见。

为什么 document.getElementById("time").innerHTML = new Date().toLocaleTimeString(); 会偶尔跳秒？

浏览器定时器不是精确的 —— setInterval 的回调可能被主线程阻塞（比如长任务、重绘），导致两次执行间隔超过 1000ms，漏掉某秒；更糟的是，如果上一帧还没渲染完，新时间又写入，视觉上就“倒跳”或“重复”。

实操建议：

• 用 requestAnimationFrame + 时间差计算，比 setInterval(, 1000) 更稳，尤其在标签页非激活时不会狂跑
• 每次更新前先用 Math.floor(Date.now() / 1000) 对齐整秒，避免毫秒级抖动影响显示
• 不要依赖 toLocaleTimeString() 的默认格式——它受系统区域设置影响，中文 Windows 可能带“上午/下午”，而服务器环境可能无 locale

怎么让时间字符串始终是 "HH:MM:SS" 格式，不崩不乱？

手动拼接最可控。别用 getHours() 直接拼，得补零；也别用 String.prototype.padStart 而不检查兼容性（IE 完全不支持）。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

实操建议：

• 用 date.getHours().toString().padStart(2, '0') 是简洁写法，但需确认目标环境支持 padStart；否则改用 (date.getHours()
• 把格式逻辑抽成函数，比如 formatTime(date)，方便复用和测试
• 避免在循环里反复调用 new Date() —— 每次都新建对象有开销，尤其低端设备；应在回调开头统一取一次

页面切到后台再切回来，时间不准了怎么办？

浏览器对非活跃标签页会节流 setInterval，最低可能降到 1s 执行一次，甚至暂停；等你切回来，new Date() 已经跳过好几秒，但定时器还按旧节奏走，结果就是“闪跳”。

实操建议：

• 不用单纯依赖定时器 tick，而是每次执行时计算与上一次真实时间差，动态修正下一次更新时机
• 监听 visibilitychange 事件：页面隐藏时暂停计时器，显示时重新初始化时间并立即刷新一次
• 关键代码片段：

  let lastTime = Date.now();
  function tick() {
    const now = Date.now();
    if (now - lastTime >= 1000) {
      updateDisplay(new Date(now));
      lastTime = now;
    }
    requestAnimationFrame(tick);
  }

真正难的不是写出那三行，而是让时间在各种网络延迟、CPU 占满、标签页切换、多屏不同分辨率下都不“卡顿”或“跳变”——这些边界情况，往往要等上线后用户截图反馈才暴露。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！