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/

演示

在http://jsfiddle.net/gaby/rbZq3/2/

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

Answer 2

试试这个：

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() {
    $('#count').animateCount(1,100);
})

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

这里的工作示例：http://jsfiddle.net/P4Xy6/2/

Answer 3

我的建议是在使用jQuery时避免使用setTimeout / Interval，因为这个库已经提供了异步函数调用的方法，例如：

$('#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。

http://jsfiddle.net/zQWRM/2/

Answer 4

var amount=parseInt($('#amount').val());
var i = parseInt($('#count').val());
var tim;

function run(){
    clearInterval(tim);
    tim = setInterval(function(){
        $('#count').val(++i);
    },100);        
}

$('#runner').click(function(){
    run();
});

LIVE DEMO

Answer 5

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   
   );
});

以下是jsfiddle的解决方案：http://jsfiddle.net/P4Xy6/10/

显示计数器的自动递增值

5 个答案: