为何我的setInterval函数无法更新页面文本？HTML/JavaScript时钟问题

你的问题出在时间变量仅初始化一次，没有在每次执行更新逻辑时重新获取当前时间。当前代码只在页面加载时读取了一次系统时间，后续每秒执行displayTime函数时，都是重复输出初始的时间值，自然不会产生动态更新的效果。

修正后的代码： #

const time_text = document.getElementById("time");

function displayTime() {
  // 每次执行函数时重新获取最新时间
  const time = new Date();
  const hours = time.getHours();
  const minutes = time.getMinutes();
  const seconds = time.getSeconds();
  
  // 补零处理，让时间格式保持两位数字（如9:5:3 → 09:05:03）
  const formattedHours = hours.toString().padStart(2, '0');
  const formattedMinutes = minutes.toString().padStart(2, '0');
  const formattedSeconds = seconds.toString().padStart(2, '0');
  
  time_text.innerHTML = `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
}

// 页面加载时先执行一次，避免延迟1秒才显示时间
displayTime();
// 每秒触发一次时间更新
setInterval(displayTime, 1000);

<div id="time"></div>

关键改动说明： #

• 将new Date()及时间变量的获取逻辑移到displayTime函数内部，确保每次执行都能拿到最新的系统时间
• 新增padStart方法做补零处理，优化时间显示的格式一致性
• 初始化时提前调用一次displayTime，解决页面加载后需要等待1秒才显示时间的问题

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