进度条未达到其值

Question

我制作了几个进度条，并尝试通过添加不同的停止值对其进行迭代，但它们停止得太早了。我试图修复它，但它似乎超出了我的（相当差的）技能。这里有什么问题？

let el = document.getElementsByClassName("skill-bar");

const max = [95, 70, 80, 60, 99, 95];
let width = 0;
let id = setInterval(frame, 50);
function frame() {
  for (let i = 0; i <= el.length; i++) {
    if (width >= max[i]) {
        clearInterval(id);
    } else {
        width++;
        el[i].setAttribute('value', width);
    }
  }
}

  <section id="service" class="skills">
        <h2 class="h2">My skills</h2>
        <div class="skill">
          <h3 class="h3 is-upcase">HTML/CSS</h3>
          <progress class="skill-bar" value="0" max="100"></progress>
        </div>
        <div class="skill">
          <h3 class="h3 is-upcase">JavaScript</h3>
          <progress class="skill-bar" value="0" max="100"></progress>
        </div>
        <div class="skill">
          <h3 class="h3 is-upcase">PHP</h3>
          <progress class="skill-bar" value="0" max="100"></progress>
        </div>
        <div class="skill">
          <h3 class="h3 is-upcase">Python</h3>
          <progress class="skill-bar" value="0" max="100"></progress>
        </div>
        <div class="skill">
          <h3 class="h3 is-upcase">Ruby</h3>
          <progress class="skill-bar" value="0" max="100"></progress>
        </div>
        <div class="skill">
          <h3 class="h3 is-upcase">Java</h3>
          <progress class="skill-bar" value="0" max="100"></progress>
        </div>
      </section>

Answer 1

两个问题：

• 您将在任何条达到最大值时立即停止间隔，而不是仅在所有条都达到最大值时停止。
• 当它是HTMLCollection 时，您将getElementsByClassName 的返回值视为一个数组

let el = document.getElementsByClassName("skill-bar");
const max = [95, 70, 80, 60, 99, 95];

let id = setInterval(frame, 50);
var done = true;
function frame() {
  done = true;
  var bar;
  for (var idx = 0; bar = el.item(idx); idx++) {
    var value = parseInt(bar.getAttribute("value"));
    if (value <= max[idx]) {
        bar.setAttribute('value', value + 1);
        done = false;
    }
  }
  if (done) {
    clearInterval(id);
  }
}

  <section id="service" class="skills">
        <h2 class="h2">My skills</h2>
        <div class="skill">
          <h3 class="h3 is-upcase">HTML/CSS</h3>
          <progress class="skill-bar" value="0" max="100"></progress>
        </div>
        <div class="skill">
          <h3 class="h3 is-upcase">JavaScript</h3>
          <progress class="skill-bar" value="0" max="100"></progress>
        </div>
        <div class="skill">
          <h3 class="h3 is-upcase">PHP</h3>
          <progress class="skill-bar" value="0" max="100"></progress>
        </div>
        <div class="skill">
          <h3 class="h3 is-upcase">Python</h3>
          <progress class="skill-bar" value="0" max="100"></progress>
        </div>
        <div class="skill">
          <h3 class="h3 is-upcase">Ruby</h3>
          <progress class="skill-bar" value="0" max="100"></progress>
        </div>
        <div class="skill">
          <h3 class="h3 is-upcase">Java</h3>
          <progress class="skill-bar" value="0" max="100"></progress>
        </div>
      </section>

Answer 2

• 您需要用标志标记完成的进度条。
• 使用setTimeout 验证完成的进度条并更好地控制您的for-loop。这是因为它可以在for-loop 结束之前调用一个新的setInterval 的迭代。
• 将当前宽度存储到每个进度条的属性value中。

let max = [95, 70, 80, 60, 99, 95];
function frame() {
  let el = document.getElementsByClassName("skill-bar");
  let loop = false;
  for (let i = 0; i < el.length; i++) {
    var width = parseInt(el[i].getAttribute('value'));
    if (width == max[i]) {
    } else {
      el[i].setAttribute('value', width + 1);
      loop = true;
    }
  }

  if (!loop) return;
  setTimeout(frame, 1);
}

frame();

<section id="service" class="skills">
  <h2 class="h2">My skills</h2>
  <div class="skill">
    <h3 class="h3 is-upcase">HTML/CSS</h3>
    <progress class="skill-bar" value="0" max="100"></progress>
  </div>
  <div class="skill">
    <h3 class="h3 is-upcase">JavaScript</h3>
    <progress class="skill-bar" value="0" max="100"></progress>
  </div>
  <div class="skill">
    <h3 class="h3 is-upcase">PHP</h3>
    <progress class="skill-bar" value="0" max="100"></progress>
  </div>
  <div class="skill">
    <h3 class="h3 is-upcase">Python</h3>
    <progress class="skill-bar" value="0" max="100"></progress>
  </div>
  <div class="skill">
    <h3 class="h3 is-upcase">Ruby</h3>
    <progress class="skill-bar" value="0" max="100"></progress>
  </div>
  <div class="skill">
    <h3 class="h3 is-upcase">Java</h3>
    <progress class="skill-bar" value="0" max="100"></progress>
  </div>
</section>