JavaScript 进度条 - 随其移动对象

Question

我正在研究 w3schools 上的 JavaScript 进度条，并试图重新编写代码，以便进度条随着百分比的增加而移动，但带有 id “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++; 
      }
  }
}