HTML/JS倒计时功能故障排查：进度条与文本未正常更新

核心问题1：HTML元素ID语法错误 #

你的<progress>和<span>标签的ID属性写法有误，前引号缺失，导致document.getElementById()无法定位到元素：

• 错误写法：id=pageBeginCountdown" → 正确写法：id="pageBeginCountdown"
• 错误写法：id=pageBeginCountdownText" → 正确写法：id="pageBeginCountdownText"

核心问题2：未调用倒计时函数 #

你只定义了ProgressCountdown函数，但没有触发执行，倒计时逻辑根本没启动，需要在页面加载完成后调用这个函数。

修复后的完整代码 #

<html>
<head>
</head>
<body>
<script>
function ProgressCountdown(timeleft, bar, text) {
  return new Promise((resolve, reject) => {
    var countdownTimer = setInterval(() => {
      timeleft--;

      document.getElementById(bar).value = timeleft;
      document.getElementById(text).textContent = timeleft;

      if (timeleft <= 0) {
        clearInterval(countdownTimer);
        resolve(true);
      }
    }, 1000);
  });
}

// 页面加载完成后启动倒计时
window.onload = function() {
  ProgressCountdown(10, "pageBeginCountdown", "pageBeginCountdownText");
};
</script>

<div>
 <div>
  <progress value="10" max="10" id="pageBeginCountdown"></progress>
  <p> Beginning in <span id="pageBeginCountdownText">10 </span> seconds</p>
 </div>
</div>
</body>
</html>

修复说明 #

1. 修正ID属性的引号语法，确保DOM元素能被JS正确获取
2. 添加window.onload事件，保证页面DOM完全加载后再执行倒计时逻辑，避免因元素未加载导致的获取失败

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