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

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

＆＃13;

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();

＆＃13;

<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>

＆＃13;

Answer 2

两个问题：

一旦任何一个柱子达到最大值，你就会停止你的间隔，而不是只在所有柱子达到最大值时停止。
您将getElementsByClassName的返回值视为数组，当它是HTMLCollection时

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>

进度条没有达到它们的值

2 个答案: