如何動畫JavaScript計數器

Question

我在計算JavaScript中0到100的值，但整個計數需要3秒才能達到0到100.但現在它發生在毫秒級。

我該怎麼做？

<span><span id="counter"> </span> of 100 files</span> 


     <script> 
      for(var i=0;i<=100;i++) 
      {  
       setTimeout(document.getElementById("counter").innerHTML = i, 3000); 
      } 
     </script> 

例子：

http://www.downgraf.com/wp-content/uploads/2014/09/03-yodaloader.gif

Answer 1

我猜你的意思是從1到去 - 100在3秒內，這裏有一個例子：

var i = 0; 

var inv = setInterval(function() {  
    if(i < 100) 
     document.getElementById("counter").innerHTML = ++i; 
    else 
     clearInterval(inv); 
}, 3000/100); 

這使得整個增量大約需要3秒鐘。它通過設置一個間隔（前綴）來增加全局變量i，並且每0.03秒設置爲innerHTML。然後在達到100之後清除間隔。您可以根據自己的喜好修改步驟，速度和界限。這裏有一個JSFiddle的例子。