javascript - 如何在html中流畅运行进度条线

Question

function move() {
  var elem = document.getElementById("myBar");   
  var width = 1;
  var counter = 1;
  var id = setInterval(frame, 1000);
  function frame() {
    if (width >= 60) {
      clearInterval(id);
    } else {
      width += 1; 
      elem.innerHTML = counter++;
      elem.style.width = width + 'px'; 
    }
  }
}

#myProgress {
  width: 120px;
  background-color: #ddd;
}

#myBar {
  width: 0px;
  height: 10px;
  background-color: #4CAF50;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>JavaScript Progress Bar</h1>

<div id="myProgress">
  <div id="myBar">0</div>
</div>
<br>
<button onclick="move()">Click Me</button>

在上面的代码片段中有一个进度条，当点击按钮时它会自动填充，它会通过添加 1 的 style.width 来填充进度条。我希望进度条顺利填充，但毫秒应保持不变，即 1000。

Answer 1

如何调整 JavaScript 代码以获得预期的结果:

function move() {
  var elem = document.getElementById("myBar");
  var width = 0.5;
  // change the milliseconds to 10 or 5 to fill it relatively faster
  var id = setInterval(frame, 20);

  function frame() {
    if (width >= 120) {
      clearInterval(id);
    } else {
      width += 0.5;
      elem.style.width = width + 'px';
    }
  }
}

#myProgress {
  width: 120px;
  background-color: #ddd;
}

#myBar {
  width: 2px;
  height: 10px;
  background-color: #4CAF50;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>JavaScript Progress Bar</h1>

<div id="myProgress">
  <div id="myBar"></div>
</div>

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