javascript - 显示计数器的自动增量值

Question

我希望为一个从 0 到给定值的计数器设置动画。

我试过使用 for() 循环，但它卡住了，然后只显示结束值。

//HTML

<input type="hidden" value="100000" id="amount"/>
<input type="text" value="0" id="count"/>
<input type="button" value="run" id="runner"/>​

//JS

$('#runner').click(function(){
   var amount=parseInt($('#amount').val());
   for(i=0;i<=amount;i++)
   {
      $('#count').val(i);
       setTimeout(1);
   }
});

你可以在这里看到它:http://jsfiddle.net/P4Xy6/1/

知道如何显示 0 和给定值之间的值吗？或者有更好的方法吗？

Answer 1

这应该可以做到..

$('#runner').click(function(){
   var amount=parseInt($('#amount').val());
   var counter = 0;
   var interval = setInterval(function(){
      $('#count').val(counter++);
      if (counter > amount){
        clearInterval(interval);
      }
   },100); // the value 100 is the time delay between increments to the counter
});

演示在 http://jsfiddle.net/gaby/rbZq3/

还有一个更优化的(通过缓存对 #count 元素的引用)在 http://jsfiddle.net/gaby/rbZq3/2/