JavaScript进度条-将对象与其一起移动

我正在研究W3N上的JavaScript进度条，试图重新编写代码，使进度条随着百分比的增加而移动，但id为“progress flag”的圆形按钮也会移动。我的代码不起作用，我尝试了几件事。多谢各位

```

```

最有趣的是，即使在测试flag元素是否会使用更简单的命令移动时，它也不会

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

JSFiddle：

---

您试图将宽度作为字符串

宽度+“%”

与不起作用的运算符

*

混合。您需要将宽度转换为表示像素的数字。我假设bar的父节点是progressbar的大小。我使用它是为了获得进度条的总宽度，然后以像素宽度计算位置

（（宽度/100）*totalProgressWidth）

此外，您不应该在间隔计时器上设置动画，无论何时在DOM中设置任何动画，都应该使用

requestAnimationFrame

。我真的很高兴

我已经更改了你的密码。我仍然使用间隔计时器来更新进度，但我使用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++; 
      }
  }
}

函数showProgressByPercent（）{
var bar=document.getElementById（“进度条”）；
//我猜父母是全宽的
var progressTotal=bar.parentNode.getBoundingClientRect（）.width；
var flag=document.getElementById（“进度标志”）；
var currentPosition=parseInt（flag.style.left）；
var宽度=5；
变量句柄=设置间隔（帧，50）；
请求动画帧（显示）；
函数显示（）{
bar.style.width=宽度+'%'；
flag.innerHTML=宽度*1+'%'；
flag.style.left=（progressTotal.left+（（宽度/100）*progressTotal.width））+'px'；
如果（宽度<100）{
请求动画帧（显示）；
}
}
函数框架（）{
如果（宽度>=100）{
宽度=100；
间隙（手柄）；
}否则{
宽度++；
}
}
}

你能创建一个JSFIDDLOK吗？我现在就来@brk@brk添加了一个JSFIDLE，感谢您建议它按预期工作。看看这个。另外，将javascript加载更改为body正如@brk所说，代码实际上在您的小提琴中工作（如果您将javascript加载类型更改为body）。这意味着可能有其他一些javascript错误阻止代码运行。检查控制台是否有任何错误谢谢@blindman67。如果你不喜欢W3学校，你有什么建议吗？@HannahBanana抱歉，关于课程，除了一点建议，我无法帮助你。检查任何在线课程的发布日期，当涉及到它时，2年是旧的，5年是过期的。作为参考和通用资源，与W3C文档（MDN保持最新链接）相比，它是最好的（虽然不是完美的），并且更易于人类阅读

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++; 
      }
  }
}