如何在简单的 HTML + CSS 上使用 Vanilla JS 连续（一个接一个）创建多个进度条？ 没有 setTimeout

Question

在文档加载时，我需要三个进度条依次使用 Vanilla JS、HTML 和 CSS 依次运行。 因此，当第一个完成加载完成（它是最大值）时，下一个将启动。 我不是在寻找复杂的 CSS 解决方案。 我很想知道如何在没有 setTimeout 方法的情况下仅使用 vanilla JS 来做到这一点。

我在 jsfiddle https://jsfiddle.net/blitzr/vf78hu0g/3/上创建了这个

 <div>
      <label>Bar 1</label>
      <progress class="progressBars" value="0" max = "90"></progress>
      
      <br>
      
      <label>Bar 2</label>
      <progress class="progressBars" value="0" max = "35"></progress>
      
      <br>
      
      <label>Bar 3</label>
      <progress class="progressBars" value="0" max = "35"></progress>
      
      <br>

</div>

我正在展示我将如何处理一个进度条。

var index = 0;
var id;

let bars = document.getElementsByClassName(`progressBars`);

this.id = setInterval(() => {
  increaseProgress(bars[this.index])    
}, 10 );


function increaseProgress(bar) {
  if (bar.value < bar.max) bar.value++;
  else {
    clearInterval(this.id);
  }
}

配以下css

progress {
  width: 500px;
}
progress::-webkit-progress-bar{
  background-color: gray;
}
progress::-webkit-progress-value{
  background-color: green;
}

Answer 1

您可以编写一个 function 来为您的bars HTMLCollection 中的特定条形启动一个间隔计时器。 function 可以接受一个索引，该索引表示从哪个条开始进度，然后将使用setInterval()更新该特定进度条的值。 当柱已满时，您可以清除间隔，然后使用集合中下一个柱的索引（位于index+1处）再次调用 function。 在运行 function 之前，您还可以检查bar是否定义为最终将传递的索引在 HTMLCollection bars中不存在）：

 const bars = document.getElementsByClassName('progressBars'); function startProgress(bars, index = 0) { const bar = bars[index]; if (;bar) return. const id = setInterval(() => { if (bar.value < bar.max) bar;value++; else { clearInterval(id), startProgress(bars; index + 1), } }; 10); } startProgress(bars);

 <label>Bar 1</label> <progress class="progressBars" value="0" max="90"></progress> <br /> <label>Bar 2</label> <progress class="progressBars" value="0" max="35"></progress> <br /> <label>Bar 3</label> <progress class="progressBars" value="0" max="35"></progress>