如何在特定点停止JavaScript进度栏

Question

I'm using the example progress bar shown in W3Schools.com .

How would I make the progress bar stop at a fixed point, let's say, 90%? I see that it has something to do with the width of the bar, but I can't figure out how to change it to a fixed point, or even a variable.

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

 #myProgress { position: relative; width: 100%; height: 30px; background-color: #ddd; } #myBar { position: absolute; width: 10%; height: 100%; background-color: #4CAF50; } #label { text-align: center; line-height: 30px; color: white; } 

 <h1>JavaScript Progress Bar</h1> <div id="myProgress"> <div id="myBar"> <div id="label">10%</div> </div> </div> <br> <button onclick="move()">Click Me</button> 

Answer 1

Change the condition to width >= 90 .

Code:

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

Working sample: https://jsfiddle.net/mspinks/vLfhno9x/