如何在倒计时进度条首次触发tick前设置宽度（无额外库）

我懂你的困扰——页面刚加载时，进度条在第一次计时跳动（tick）到来前，还是浏览器默认的窄样式，完全不符合你想要的75%宽度和40px高度，只有等第一秒过去、第一次tick触发后才会显示正常。这是因为你把进度条的样式设置代码放在了定时器的回调里，而定时器要等1秒才会第一次执行，这就导致前1秒内样式根本没生效。

下面是修改后的完整代码，我会标注关键的改动点：

<html>
<body>
<style>
/* 把进度条的基础样式放在CSS里，页面加载时就能立刻生效，不用等JS回调 */
#pageBeginCountdown {
  width: 75%;
  height: 40px;
}
.begin-countdown {
  margin-top: 20px; /* 加个顶部间距，视觉上更舒服 */
}
</style>
<script>
// 启动倒计时
ProgressCountdown(10, 'pageBeginCountdown', 'pageBeginCountdownText').then(value => alert(`Time is up!!!!!!!!!`));

function ProgressCountdown(timeleft, barId, textId) {
  return new Promise((resolve, reject) => {
    // 先一次性获取DOM元素，避免定时器回调里重复查询DOM
    const barElement = document.getElementById(barId);
    const textElement = document.getElementById(textId);

    // 初始化设置：页面加载完成后立刻配置好初始状态
    barElement.max = timeleft; // 确保进度条的最大值和初始倒计时时间一致
    barElement.value = timeleft; // 设置初始进度值
    textElement.textContent = timeleft; // 设置初始倒计时文本

    var countdownTimer = setInterval(() => {
      timeleft--;
      barElement.value = timeleft;
      textElement.textContent = timeleft;

      if (timeleft <= 0) {
        clearInterval(countdownTimer);
        resolve(true);
      }
    }, 1000);
  });
}
</script>
<div class="row begin-countdown">
  <div class="col-md-12 text-center">
    <progress id="pageBeginCountdown"></progress>
    <p> Time up in <span id="pageBeginCountdownText"></span> seconds</p>
  </div>
</div>
</body>
</html>

关键改动说明： #

• 样式提前加载：把进度条的宽高样式移到<style>标签里，页面一加载就会直接应用，不用等JS定时器触发。如果你更习惯用JS控制样式，也可以在函数开头用barElement.style.width = "75%"这类代码设置，效果完全一样。
• 初始化前置：在定时器启动前，就完成进度条的max、value和倒计时文本的设置，确保页面打开瞬间就显示正确的初始状态，不会出现等待1秒才更新的空白或错误样式。
• 移除冗余代码：删掉定时器回调里重复的样式设置，已经初始化好的样式不需要每次tick都重新赋值，减少不必要的性能消耗。

这样修改后，页面刚打开就能看到符合预期的进度条，首次tick前的样式完全正常，后续倒计时也能平稳运行。

内容的提问来源于stack exchange，提问作者Wladyslaw A.