时钟Span标签不更新：补0及0转12逻辑生效但页面无变化

云上老周

2026-5-12

问题分析与解决方案

我一眼就看出问题出在哪了——你把DOM更新和时间格式化的顺序搞反了！

你当前的代码是先把未处理的原始小时/分钟/秒直接赋值给对应的Span元素，之后才做补0、转12小时制的格式化处理。但这些处理后的变量值并没有重新同步到DOM里，所以虽然console.log能看到正确的格式化后数值，页面上的Span内容却还是最初的原始值，自然不会更新。

修正后的代码

function showTime(){ 
  const date = new Date(); 
  const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]; 
  
  // 第一步：先获取原始时间数据，不直接操作DOM
  let day = days[date.getDay()];
  let h = date.getHours(); 
  let m = date.getMinutes(); 
  let s = date.getSeconds(); 

  // 第二步：处理12小时制和补0逻辑
  if(h === 0){ 
    h = 12; 
  } else if(h > 12){ 
    h -= 12; 
  } 
  h = h < 10 ? `0${h}` : h; 
  m = m < 10 ? `0${m}` : m; 
  s = s < 10 ? `0${s}` : s; 

  // 第三步：把格式化后的最终值更新到DOM元素
  document.getElementById("day").innerHTML = day;
  document.getElementById("hour").innerHTML = h; 
  document.getElementById("minute").innerHTML = m; 
  document.getElementById("second").innerHTML = s; 

  setTimeout(showTime, 1000); 
  console.log(m); 
} 
showTime();