试图让进度条逐渐移动

Question

如何让我的进度条根据我的问题编号递增显示。目前它在单击下一个问题按钮后完成到 100%。但是，如果单击前一个问题按钮，我试图让它增加问题编号的增量并向后退。包含所有代码的代码笔是here。谢谢。

  var i = 0;
  function moveForward() {
    if (i == 0) {
      i = 1;
      var elem = document.getElementById("myBar");
      var width = 10;
      var id = setInterval(frame, 10);
      function frame() {
        if (width >= 100) {
          clearInterval(id);
          i = 0;
        } else {
          width++;
          elem.style.width = width + "%";
          elem.innerHTML = width + "%";
        }
      }
    }
  }
  
  function moveBackward() {
    if (i == 0) {
      i = 1;
      var elem = document.getElementById("myBar");
      var width = 10;
      var id = setInterval(frame, 10);
      function frame() {
        if (width >= 100) {
          clearInterval(id);
          i = 0;
        } else {
          width++;
          elem.style.width = width + "%";
          elem.innerHTML = width + "%";
        }
      }
    }
  }

///// 更新函数

  function moveForward(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%";
    }
  }

Answer 1

一键完成的原因是setInterval每x毫秒重复运行一次函数。这意味着您的 frame 函数每 10 毫秒运行一次，直到它遇到清除间隔的 if 语句。由于您的停止检查仅在 width >= 100 停止，因此它会继续扩展，直到设置为 100%。

为了正确跟踪现有宽度和下一个宽度，您需要在全局范围内拥有一个持久变量，并且您需要将目标宽度传递给 frame 以便它知道何时实际停止

您的代码还有另外两个问题。第一个是上一个按钮也增加而不是减小宽度，另一个问题是每次单击下一个或上一个按钮时，它首先将宽度重置为 10，然后将其增加为 100。