Wie JavaScript Fortschrittsbalken an einem bestimmten Punkt zu stoppen

Question

Ich verwende die Beispielfortschrittsbalken in W3Schools.com gezeigt.

Wie würde ich den Fortschrittsbalken an einem festen Punkt anhalten lassen, sagen wir 90%? Ich sehe, dass es etwas mit der Breite des Balkens zu tun hat, aber ich kann nicht herausfinden, wie man es in einen festen Punkt oder sogar eine Variable ändern kann.

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

Ändern Sie den Zustand 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 + '%'; 
    } 
    } 
} 

Arbeits Beispiel: https://jsfiddle.net/mspinks/vLfhno9x/