如何实现无需刷新网页即可实时更新的时钟？

你的时钟仅在页面刷新时更新，原因是代码仅在页面加载时执行了一次clockUpdate()，没有定时触发更新逻辑。以下是具体修复方案：

核心修改：添加定时触发机制 #

使用setInterval()函数让clockUpdate()每秒执行一次，实现时间与现实自动同步：

const hourEl = document.getElementById('hour')
const minEl = document.getElementById('minutes')
const secEl = document.getElementById('seconds')
const ampmEl = document.getElementById('ampm')

function clockUpdate() {
  let h = new Date().getHours()
  let m = new Date().getMinutes()
  let s = new Date().getSeconds()
  let ampm = 'AM'
  
  // 转换为12小时制
  if (h > 12) {
    h = h - 12;
    ampm = 'PM';
  }
  // 补零处理，保证两位数显示（如9点显示09，5分显示05）
  h = h < 10 ? '0' + h : h;
  m = m < 10 ? '0' + m : m;
  s = s < 10 ? '0' + s : s;
  
  hourEl.innerHTML = h;
  minEl.innerHTML = m;
  secEl.innerHTML = s;
  ampmEl.innerHTML = ampm; // 补上之前遗漏的上午/下午标识更新
}

// 初始化执行一次，之后每秒自动更新
clockUpdate();
setInterval(clockUpdate, 1000);

修复HTML语法错误 #

你的HTML代码存在标签闭合错误，将<span id="seconds">:/span>修改为：

<span id="hour"></span>:<span id="minutes"></span>:<span id="seconds"></span> <span id="ampm"></span>

补充说明 #

• setInterval(clockUpdate, 1000)会每隔1000毫秒（1秒）调用一次更新函数，实现实时同步。
• 补零逻辑让时间显示更规范，避免单数字的零散感。
• 补上了ampmEl的内容更新，确保上午/下午标识正常显示。

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