时间戳

首页 > 解决方案 > Javascript进度条未显示正确的完成百分比

javascript - Javascript进度条未显示正确的完成百分比

问题描述

在下面的代码中，我试图让进度条显示 100%，但它保持在 66%。这是一个包含三个问题的测验。在提交第三个问题后，第一个问题和第二个问题分别显示 33% 和 66% 时，它仍然显示 66%，但条形完全完成跨越条形的整个宽度。在此处完成 codepen 。. 第三个问题后如何显示100％？谢谢你。

进度条JS代码：

function move(i) {
    console.log('i: ' + i);
    var elem = document.getElementById("myBar");
    switch(i) {
      case 0:
        elem.style.width = "33%";
        elem.innerHTML = "33%";
        break;
      case 1:
        elem.style.width = "66%";
        elem.innerHTML = "66%";
        break;
      case 2:
        elem.style.width = "100%";
        elem.innerHTMl = "100%";
    }
  }

标签： javascript

解决方案

我有一个更通用的方法来做到这一点，因为 myQuestions 变量可以有任何长度，所以使用 switch case 不适合这样做。

function move(slide, total) {
  console.log('slide: ' + slide);
  var elem = document.getElementById("myBar");
  const percent = (slide + 1) / total * 100;
  elem.style.width = `${percent}%`;
  elem.innerHTML = percent != 100 ? `${percent.toPrecision(2)}` : "100%";
}

// From your code you can just call like this
move(currentSlide, myQuestions.length);

希望你觉得这很有帮助。

推荐阅读