Question

我正在关注如何实施简单进度条的this tutorial on w3schools

我想通过将值强制为100或其他方式来完成进度条。

function move(w) {
          var width = parseInt(w);
          var elem = document.getElementById("myBar");   
          var id = setInterval(frame, 300);
          function frame() {
            if (width >= 100) {
              clearInterval(id);
            } else {
              width+=1; 
              elem.style.width = width + '%'; 
              elem.innerHTML = width * 1  + '%';
            }
          }
        }

通话功能

 move(10);

现在我希望它完成我再次打电话

move(100);

以上不起作用，为什么？

Answer 1

调用函数move(100)不起作用只是因为它没有逻辑。

您必须添加此内容。见下面的代码：

function move(w) {
  var width = parseInt(w);
  var elem = document.getElementById("myBar");   
  var id = setInterval(frame, 300);
  function frame() {
    if (width > 100) {
      clearInterval(id);
    } else if(width == 100) {
      elem.style.width = width + '%';  //add this line
      elem.innerHTML = width * 1  + '%'; //add this line
    } else {
      width+=1; 
      elem.style.width = width + '%'; 
      elem.innerHTML = width * 1  + '%';
    }
  }
}

Answer 2

<button onclick="move(54)">Click Me</button> 

<script>
function move(len) {
  var elem = document.getElementById("myBar");   
  var width = 10;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= len) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
      elem.innerHTML = width * 1  + '%';
    }
  }
}
</script>

传递参数并接受它解决了这个问题

如何强制进度条的值为100

2 个答案: