Javascript 显示计数器的自动增量值

我希望将计数器从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'）。单击（函数（）{
var amount=parseInt（$（'#amount'）.val（）；
对于（i=0；i试试这个：

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.val(from += steps);

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

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

第一个参数是起始编号，第二个是最终编号，第三个参数是（可选）间隔计时器

这里的工作示例：
这应该可以

$('#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
});

演示

还有一个更优化的（通过缓存对
#count
元素的引用）位于

HTML：

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


​  

JavaScript:

var maxAmount = 5;

$('#runner').click(function(){
   setInterval(
       function() {
           var amount = $('#amount').val();
           if(amount < maxAmount)
           {
               amount++;
               $('#amount').attr('value', amount);
               $('#count').attr('value', amount);        
           }
           else
           {
               clearInterval();
           }
       },
       500   
   );
});

var最大金额=5；
$（'#runner'）。单击（函数（）{
设定间隔(
函数（）{
变量金额=$（“#金额”）.val（）；
如果（金额<最大金额）
{
金额++；
$（'金额'）.attr（'价值'，金额）；
$（'计数'）.attr（'值'，金额）；
}
其他的
{
clearInterval（）；
}
},
500
);
});

以下是关于JSFIDLE的解决方案：
我的建议是在使用jQuery时避免设置超时/间隔，因为这个库已经提供了异步函数调用的方法，例如：

$('#runner').click(function() {
   var amount = parseInt($('#amount').val());

   $({c: 0}).animate({c: amount}, {
        step: function(now) {
            $("#count").val(Math.round(now))
        },
        duration: 3000,
        easing: "linear"
    });
})

这会在3秒内将计数器从
0
设置为
amount

+1适合你们两个！@Gaby aka G.Petrioli它工作正常，但持续时间太长（即使是1ms），因为我的数量以百万计。如何更快地完成？$（“#计数”）.val（计数器+1000）？@Valky，是的。如果将其设置为1ms不够快，则需要增加增量值。将
计数器+++
更改为
计数器+=10
完美答案！这正是我需要的（没有明确解释…）数量是数百万，因此此“持续时间”参数是更好的方法。非常感谢。
<input type="hidden" value="100000" id="amount"/>
<input type="text" value="0" id="count"/>
<input type="button" value="run" id="runner"/>​  

var maxAmount = 5;

$('#runner').click(function(){
   setInterval(
       function() {
           var amount = $('#amount').val();
           if(amount < maxAmount)
           {
               amount++;
               $('#amount').attr('value', amount);
               $('#count').attr('value', amount);        
           }
           else
           {
               clearInterval();
           }
       },
       500   
   );
});

$('#runner').click(function() {
   var amount = parseInt($('#amount').val());

   $({c: 0}).animate({c: amount}, {
        step: function(now) {
            $("#count").val(Math.round(now))
        },
        duration: 3000,
        easing: "linear"
    });
})