Je veux faire une animation de barre de chargement personnalisée qui dure 7 secondes. J'ai créé en utilisant JavaScript comme suit, mais cela passe plus vite que prévu. Quelle est la bonne façon de le faire dure 7 secondes?
p>
<div style="width:200px;align:left;text-align:left;border-radius:6px;">
<div id="myProgress">
<div id="myBar">1%</div>
</div>
</div>
<button value="run" onclick="move()">RUN</button>3 Réponses :
Définir le délai d'expiration code> TIMEOUTOOUT CODE> à une valeur supérieure, au fil du temps dans la fonction P> Settimeout code> est mesuré dans ms forte>, 1ms fort> est un très petit intervalle de temps. Essayez avec
<div style="width:200px;align:left;text-align:left;border-radius:6px;">
<div id="myProgress">
<div id="myBar">1%</div>
</div>
</div>
<button value="run" onclick="move()">RUN</button>
Si vous affichez le pourcentage de charge est facultatif, vous pouvez utiliser CSS pour obtenir cette opération. L'animation CSS sera toujours plus rapide que JS Animation.
p>
<div style="width:200px;align:left;text-align:left;border-radius:6px;">
<div id="myProgress">
<div id="myBar"></div>
</div>
</div>
<button value="run" onclick="move()">RUN</button>Charge très lisse, mais le% est parti
@ user198989 qui est par conception. J'ai déjà mentionné dans la description
Vous devez modifier la valeur définie, par exemple -> et aussi si vous voulez 7 secondes 70 ou 60, il suffit de vous. P> var id = setInterval(frame, 60);
Il y a 100 étapes dans l'animation, donc si vous voulez que cela dure 7 secondes, faites l'intervalle 70ms
Depuis 7 secondes, 7000 ms, vous commencez à 1 et souhaitez vous arrêter à 100, vous devez modifier le style 99 fois en 7 secondes. Donc 7000/99 = 70.7 ....... Ou commencez à 0% et il suffit d'utiliser 70. Utilisez donc un intervalle tous les 70 ms au lieu de chaque 1 ms.