setInterval中日期未实时更新：网页时间显示但秒数无变化

嘿，这个问题很常见，我一眼就找到症结了！你把new Date()放在了全局作用域里，导致这个日期对象只在页面加载时被创建一次，之后每次调用setTime函数，读取的都是同一个固定的时间快照——这就是秒数不会跳动的原因！

问题根源详解 #

当你在代码最外层执行const date = new Date();时，它会捕获页面加载瞬间的时间，之后这个date变量就不会自动更新了。哪怕setInterval每秒触发一次setTime，函数里用的还是最初那个时间的小时、分钟和秒，页面显示的时间自然就固定住了。

两种可行解决方案 #

方案1：每次调用时创建新的Date对象（推荐）

直接把new Date()移到setTime函数内部，这样每次执行函数都会获取当前最新的时间：

const hour = document.querySelector(".hour"); 
const minute = document.querySelector(".minute"); 
const seconds = document.querySelector(".seconds"); 
const timeZone = document.querySelector(".timeZone"); 

setInterval(setTime, 1000); 
function setTime() { 
  // 每次调用都生成新的Date对象，拿到实时时间
  const date = new Date();
  hour.textContent = `${date.getHours()} : `; 
  minute.textContent = `${date.getMinutes()} : `; 
  seconds.textContent = date.getSeconds(); 
} 
setTime();

方案2：复用Date对象，每次更新时间

如果你想保留全局的date变量，可以在每次调用setTime时，用Date.now()更新它的时间戳：

const hour = document.querySelector(".hour"); 
const minute = document.querySelector(".minute"); 
const seconds = document.querySelector(".seconds"); 
const timeZone = document.querySelector(".timeZone"); 
const date = new Date(); 

setInterval(setTime, 1000); 
function setTime() { 
  // 将date对象更新为当前时间
  date.setTime(Date.now());
  hour.textContent = `${date.getHours()} : `; 
  minute.textContent = `${date.getMinutes()} : `; 
  seconds.textContent = date.getSeconds(); 
} 
setTime();

额外小建议 #

我还建议你用textContent替代innerHTML来设置文本内容——因为我们只是展示纯时间文本，textContent不仅性能更好，还能避免潜在的XSS安全风险哦！

内容的提问来源于stack exchange，提问作者niko