在第一个 "tick" 之前设置进度条（倒计时）的宽度（无其他库）

Question

我想在第一个刻度被触发之前设置倒计时进度条的宽度（没有额外的库，只有 javascript、html 和 css一个代码文件）我曾多次尝试更改代码（尤其是 html 代码）并测试了来自不同参考资料和本网站的许多示例，但它没有用。

你能给我一些提示，看看在哪里可以解决这个问题。您可以将我的示例代码复制到一个 txt 文件中，然后在您的浏览器中将其简单地运行为 html，您就会看到问题所在。它只是关于第一个报价前的条形宽度，之后一切看起来都符合预期。我知道我必须以某种方式设置宽度（通常在 css 或 div 行中），但不知道如何在这种特殊情况下进行设置。

<html>
<body>

<style>
</style>

<script>
ProgressCountdown(10, 'pageBeginCountdown', 'pageBeginCountdownText').then(value => alert(`Time is up!!!!!!!!!`));

function ProgressCountdown(timeleft, bar, text) {
  return new Promise((resolve, reject) => {
    var countdownTimer = setInterval(() => {
      timeleft--;

      document.getElementById(bar).value = timeleft;
      document.getElementById(bar).style.width = "75%";
      document.getElementById(bar).style.height = "40px";
      document.getElementById(text).textContent = timeleft;

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

<div class="row begin-countdown">
  <div class="col-md-12 text-center" >
    <progress value="10" max="10" id="pageBeginCountdown"></progress>
    <p> Time up in <span id="pageBeginCountdownText">10 </span> seconds</p>
  </div>
</div>

</body>
</html

Answer 1

在您的 .css 文件中添加以下行：

progress[10] {
  width: 200px;
}

将宽度修改为您想要的尺寸。

此致。

在第一个 "tick" 之前设置进度条（倒计时）的宽度（无其他库）

Setting width of progress-bar (countdown) before first "tick" (no additional libraries)

javascript

html

progress-bar

countdown