Y at-il une option pour augmenter et diminuer la vitesse de la progression? Parfois, le progrès prend du temps et parfois très lentement pour finir:JavaScript: comment contrôler la vitesse de progression?
var value = 0,
interval = setInterval(function(){
value = ((+value) + .1).toFixed(1);
if(value == 80.5) clearInterval(interval);
$('p').html(value+'%');
},2);
http://jsfiddle.net/sweetmaanu/zjdBh/13/
Vous remarquerez que votre code utilise setInterval(). Cette fonction JavaScript globale est utilisée pour exécuter périodiquement du code à un intervalle de temps donné. Il prend deux arguments pour son utilisation typique (ce qui est la façon dont vous l'utilisez ici). Il renvoie un identifiant unique qui peut être utilisé pour identifier votre fonction d'intervalle particulière (puisque plusieurs fonctions peuvent être configurées simultanément).
Le premier argument est une fonction à exécuter sur l'intervalle. Votre fonction est la fonction anonyme:
function() {
value = ((+value) + .1).toFixed(1);
if (value == 80.5) clearInterval(interval);
$('p').html(value + '%');
}
Cette fonction augmentera le pourcentage de progression de chaque exécution.
Le deuxième argument est un nombre entier pour le nombre de millisecondes (millièmes de seconde) à laisser s'écouler avant que la fonction du premier argument soit exécutée. C'est la partie clé de votre question, je crois. Votre code a 2 (sur la dernière ligne de votre code posté), donc il attendra 2 millisecondes avant d'exécuter votre fonction (qui incrémente le pourcentage de progression), puis il attendra 2 millisecondes de plus, puis exécutera la même fonction, etc. En changeant simplement la valeur du second argument, vous pouvez changer à quelle vitesse ou à quelle vitesse votre fonction s'exécute à chaque fois, ce qui change la vitesse à laquelle votre pourcentage augmente ou ralentit. Donc, si vous le définissez sur 500, alors setInterval attendra une demi-seconde avant chaque exécution de la fonction.
Vous pouvez lire sur les autres fonctions de temporisateur JavaScript here, en particulier sur clearInterval(), que votre code utilise dans la fonction anonyme pour terminer l'intervalle lorsque vous atteignez 80.5%.
@ ajp14243 le meilleur moyen est d'utiliser 'jQuery' ou tout autre' JavaScript' n'est pas? – Muhammed
Si vous voulez augmenter ou diminuer le Pourcentage de progression, il suffit de changer le '2' qui se trouve sur votre dernière ligne de code pour correspondre au nombre de millisecondes souhaité entre chaque mise à jour de la valeur en pourcentage.Vous ne devriez pas avoir à apporter d'autres changements si votre objectif est d'incrémenter un le pourcentage compte jusqu'à '80.5%' et arrête – ajp15243
merci pour votre aide Malheureusement '2' vitesse pas assez parfois :(, avez-vous une autre fonction pour moi – Muhammed
J'espère que cette aide:
$(function(){
var value1 = 0;
var value2 = 0;
var span1 = $('#val1');
var span2 = $('#val2');
var interval1 = setInterval(function(){
span1.text(++value1);
if (value1 === 80) {
clearInterval(interval1);
clearInterval(interval2);
interval1 = null;
interval2 = null;
span2.text(5);
}
}, 100); // you can change speed here
var interval2 = setInterval(function() {
span2.text(value2++ % 10);
}, 70);
});
HTML:
<body>
<div class="progress-bar"></div>
<hr>
<p><span id="val1">0</span>.<span id="val2">1</span>%</p>
</body>
voici l'exemple de mon travail http://jsfiddle.net/sweetmaanu/Ta8mR/3/ – Muhammed
beau travail :) Je cherchais ce genre de solution. Je suis confronté à un problème à ce sujet quand 'value1 === 95.5' :( – Muhammed
@MuhammedAthimannil Il suffit d'utiliser' value1 === 95', parce que '.5' est mis séparément par un autre' interval2' comme 'span2.text (5) ' – Ikrom
augmenter simplement le dernier numéro, la '2' à la fin de l'intervalle? – adeneo
@adeneo ne comptant pas de fin et aussi resulr montrant plus d'un chiffre comme ceci 99.561321654651615% :( – Muhammed