Question

我正在研究w3schools上的JavaScript进度条试图重新编写代码，以便进度条随着百分比的增加而移动，但是一个带有“progress-flag”的小圆形按钮也会移动。我的代码没有用，我尝试了几件事。谢谢。

```

function showProgressByPercent() {
  var bar = document.getElementById("progress-bar");
  var flag = document.getElementById("progress-flag");
  var currentPosition = parseInt(flag.style.left);
  var width = 5;
  var arg = setInterval(frame, 50);
  function frame() {
    if (width >= 100) {
      clearInterval(arg);
    } else {
      width++; 
      bar.style.width = width + '%'; 
      flag.innerHTML = width * 1  + '%';
      flag.style.left = currentPosition * (width + '%') + 'px';
    }
  }
}

```

最有趣的是，即使在使用更简单的命令进行测试以查看标志元素是否会移动时，它也不会。

在我掌握JavaScript之前，尽量避免使用JQuery。

JSFiddle：

https://jsfiddle.net/b28yh9hd/

Answer 1

您正尝试将宽度作为字符串width + "%"与不可行的运算符*混合。您需要将宽度转换为表示像素的数字。我假设bar的父节点是进度条的大小。我使用它以便我可以获得进度条的总宽度，然后以像素宽度((width / 100) * totalProgressWidth)计算位置。

此外，您不应在间隔计时器上设置动画，每当您在DOM中设置动画时，都应使用requestAnimationFrame。 w3schools真的!!!!。

我已经更改了你的代码。我仍然使用间隔计时器来更新进度，但我使用requestAnimationFrame来更新DOM。

function showProgressByPercent() {
  var bar = document.getElementById("progress-bar");
  // I am guessing that the parent has the fulll width
  var progressTotal = bar.parentNode.getBoundingClientRect().width;
  var flag = document.getElementById("progress-flag");
  var currentPosition = parseInt(flag.style.left);
  var width = 5;
  var handle = setInterval(frame,50);
  requestAnimationFrame(display);

  function display(){
      bar.style.width = width + '%'; 
      flag.innerHTML = width * 1  + '%';
      flag.style.left = (progressTotal.left + ((width / 100) * progressTotal.width)) + 'px';
      if(width < 100){
          requestAnimationFrame(display);
      }
  }
  function frame() {
      if (width >= 100) {
          width = 100;
          clearInterval(handle);
      } else {
          width++; 
      }
  }
}

JavaScript进度条 - 随之移动对象

1 个答案: