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

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

我已经开始学习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)

谁能帮帮我？感谢您抽出宝贵时间。

解决方法

通过使用 setInterval 每 5 毫秒调用这组代码，您已经有了一个循环。

您可以继续循环增长进度的一种方法是设置最大宽度。我不确定是否有可以查询宽度的父容器，或者您是否想设置一个常量，但只需在每次宽度大于最大值时检查，重置回 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);