如何在循环中转换这段代码

Question

我已经开始学习JavaScript，我试图制作一个加载条的动画，但我不知道如何使它在条到达终点后重复这个功能，我想也许通过一个循环我可以得到我想要的结果，但我仍然在学习循环，我尝试了不同的方法，改变了整个代码，但没有任何效果。

const progressBar1 = document.getElementsByClassName
('progress-bar1')[0]
setInterval(() => {
  const computedStyle = getComputedStyle(progressBar1)
  const width = parseFloat(computedStyle.getPropertyValue
    ('--width')) || 0
  progressBar1.style.setProperty('--width', width + .1)
},5)

有人能帮我吗？谢谢你抽出时间。

Answer 1

通过使用setinterval每隔5ms调用这组代码，您已经有了一个循环。

您可以通过设置max-width来继续循环增长进度的一种方法。我不确定是否有可以查询宽度的父容器，或者是否要设置一个常量，但只要每次宽度大于max时检查，重置为0，然后再次增长。

const progressBar1 = document.getElementsByClassName
('progress-bar1')[0];
const widthMax = 300;

setInterval(() => {
  const computedStyle = getComputedStyle(progressBar1);
  const widthCurrent = parseFloat(computedStyle.getPropertyValue
    ('--width')) || 0;

  const width = widthCurrent > widthMax ? 0 : widthCurrent;
  progressBar1.style.setProperty('--width', width + .1);
}, 5);