Comment afficher le compteur de fonctionnement en Javascript?

J'ai une cellule de tableau qui contient une valeur numérique.Comment afficher le compteur de fonctionnement en Javascript?

Lorsque vous modifiez la valeur, je souhaite créer un effet dans lequel le compteur monte (ou descend) en 100 étapes jusqu'à atteindre la nouvelle valeur.

J'ai essayé quelque chose comme ce qui suit (avec l'aide de jQuery):

  
function update(element,newValue) 
{ 
    var oldValue = parseFloat($(element).text()); 
    var diff = (newValue - oldValue)/100; 
    for (var i = 0; i < 100; i++) { 
    oldValue += diff; 
    $(element).text(oldValue); 
    } 
}

Cependant, Javascript ne semble pas rafraîchir l'affichage jusqu'à ce que après le script fait - il n'y a donc pas d'effet.

Comment puis-je m'assurer que les valeurs intermédiaires sont affichées à chaque étape? JavaScript et le DOM partagent le même thread, de sorte que l'affichage ne peut pas être actualisé pendant que le script est en cours d'exécution.

Source

2010-02-23 Sleepster

Quelque chose comme ceci est très jQuery orienté:

jQuery.fn.extend({ 
    animateCount : function (from, to, time) { 
    var steps = 1, 
     self = this, 
     counter; 

    if (from - to > 0) { 
     steps = -1; 
    }; 

    from -= steps; 

    function step() { 
     self.text(from += steps); 

     if ((steps < 0 && to >= from) || (steps > 0 && from >= to)) { 
     clearInterval(counter); 
     }; 
    }; 

    counter = setInterval(step, time || 100); 
    } 
});

Maintenant, il suffit d'utiliser:

$('#selector').animateCount(1,100);

Ce qui comptera de 1 à 100, le nombre étant incrémenté toutes les 100 ms. L'intervalle est un troisième paramètre facultatif.

Source

2010-02-23 15:33:12 Matt

Merci. Très utile! – Sleepster

Il doit attendre que le thread devienne inactif. Vous pouvez seulement réaliser ce que vous essayez de faire avec un appel setTimeout ou setInterval, en augmentant chaque étape avec une minuterie au lieu d'une boucle.

Source

2010-02-23 15:02:32

ne suis pas sûr du côté JQuery des choses, mais voici une page rapide exemple:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"> 
    <head> 
     <title>test</title> 
     <script type="text/javascript"> 
      var t, max, i; 

      function Increase(amount) { 
       max = amount; 
       i = parseInt(document.getElementById("count").value); 
       t = setInterval("SetIncrease()", 10); 
      } 

      function SetIncrease() { 
       document.getElementById("count").value = ++i; 
       if(i == max) { 
        clearTimeout(t); 
       } 
      } 
     </script> 
    </head> 
    <body> 
     <input id="count" type="text" value="1"/> 
     <input type="button" value="Up" onclick="Increase(100)"/> 
    </body> 
</html>

Source

2010-02-23 15:08:21

Comment afficher le compteur de fonctionnement en Javascript?

Répondre

Questions connexes