顯示計數器的自動增量值

我希望將計數器從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和給定之間的顯示值上的任何想法價值？或者有更好的方法來做到這一點？

來源

2012-03-01 Valky

我的建議是要避免的setTimeout /間隔使用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" 
    }); 
})

這使得動畫e計數器在3秒內從0到amount。

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

來源

2012-03-01 17:26:57 georg

完美答案！這正是我所需要的（沒有清楚地解釋它......）金額是數百萬，所以這個「持續時間」參數是更好的方法。非常感謝。 – Valky 2012-03-01 20:21:06

試試這個：

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/

來源

2012-03-01 17:06:09 ManseUK

這應該是d ø它..

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

來源

2012-03-01 17:06:42

+1比我的努力簡單多了!!! – ManseUK 2012-03-01 17:09:59

爲你+1！ @Gaby aka G. Petrioli它工作正常，但持續時間太長（甚至在1毫秒），因爲我的數額是在數百萬。如何更快地做到這一點？ $（ '＃計數'）VAL（計數器+ 1000）; ？ – Valky 2012-03-01 17:13:22

@Valky，是的..如果將它設置爲1ms速度不夠快，那麼您需要增加增量值。將'counter ++'改成'counter + = 10' – 2012-03-01 17:38:59

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

來源

2012-03-01 17:13:40

更優化的一個（ 通過緩存參照#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 
    ); 
});

這裏是的jsfiddle解決方案：http://jsfiddle.net/P4Xy6/10/

來源

2012-03-01 17:21:43

顯示計數器的自動增量值

回答

相關問題