javascript 显示计数器的自增值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9520562/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display auto-increment values of a counter
提问by Valky
I wish to animate a counter from 0 to a given value.
我希望将计数器从 0 动画到给定值。
I've tried with a for()loop, but it freezes and then only displays the end value.
我试过for()循环，但它冻结，然后只显示最终值。
// HTML
// HTML
<input type="hidden" value="100000" id="amount"/>
<input type="text" value="0" id="count"/>
<input type="button" value="run" id="runner"/>?
// JS
// JS
$('#runner').click(function(){
var amount=parseInt($('#amount').val());
for(i=0;i<=amount;i++)
{
$('#count').val(i);
setTimeout(1);
}
});
?You can see it here : http://jsfiddle.net/P4Xy6/1/
?你可以在这里看到它：http: //jsfiddle.net/P4Xy6/1/
Any idea on how I could display the values between 0 and the given value ? Or any better way to do that ?
关于如何显示 0 和给定值之间的值的任何想法？或者有什么更好的方法来做到这一点？
采纳答案by georg
My advice is to avoid setTimeout/Interval when using jQuery, because this library already provides means for asynchronous function calls, for example:
我的建议是在使用 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"
});
})
This animates the counter from 0to amountin 3 seconds.
这0将amount在 3 秒内为计数器设置动画。
回答by Gabriele Petrioli
This should do it ..
这应该这样做..
$('#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
});
Demo at http://jsfiddle.net/gaby/rbZq3/
演示在http://jsfiddle.net/gaby/rbZq3/
And a more optimized one (by caching the reference to the #countelement) at http://jsfiddle.net/gaby/rbZq3/2/
还有一个更优化的（通过缓存对#count元素的引用）在http://jsfiddle.net/gaby/rbZq3/2/
回答by Manse
Try this :
试试这个 ：
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);
}
});
Then in your click function call it :
然后在你的点击函数中调用它：
$('#runner').click(function() {
$('#count').animateCount(1,100);
})?
first param is start number, second is final number, third param is (optional) interval timer
第一个参数是开始编号，第二个是最终编号，第三个参数是（可选）间隔计时器
Working example here : http://jsfiddle.net/P4Xy6/2/
这里的工作示例：http: //jsfiddle.net/P4Xy6/2/
回答by Roko C. Buljan
回答by Mike Moore
HTML:
HTML：
<input type="hidden" value="100000" id="amount"/>
<input type="text" value="0" id="count"/>
<input type="button" value="run" id="runner"/>?
JavaScript:
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
);
});
Here is the solution on jsfiddle: http://jsfiddle.net/P4Xy6/10/
这是 jsfiddle 上的解决方案：http: //jsfiddle.net/P4Xy6/10/
