如何在特定點停止JavaScript進度欄

Question

我正在使用W3Schools.com中顯示的示例進度欄。

我如何使進度條停在某個固定點（例如90％）？ 我看到它與條的寬度有關，但我不知道如何將其更改為固定點甚至變量。

 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

將條件更改為width >= 90 。

碼：

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

工作示例： https : //jsfiddle.net/mspinks/vLfhno9x/