Javascript 使用jQuery使数字增长，对每个数字使用相同的时间

我的目标是使用

setInterval（）

执行一个jQuery脚本，该脚本将使任何数字从零直观地增长到其值

以下是我的想法：

$('.grow').each(function() {
        var $el = $(this);
        var max = parseInt($el.text().replace(/\s/g, ''));
        var refresh = 5;
        var start = 0;
        var step = 1;
        var interval = window.setInterval(function() {
            start += step;
            $el.text(start);
            if(start >= max)
                clearInterval(interval);
        }, refresh);
    });

我的问题是我的数字从几百到几十万不等。使用此脚本，较大的数字需要更多的时间才能达到其值

我的目标是让任何数字，无论其目标值如何，都花相同的时间达到它。我感觉我应该将这个数字除以我希望动画运行的秒数，然后将结果设置为间隔步长

我正在询问，但仍在寻求帮助：）

---

谢谢。

我想这应该行得通

$('.grow').each(function() {
    var $el = $(this);
    var max = parseInt($el.text().replace(/\s/g, ''));

    var start = 0;
    var refresh = 5; 
    var totalSteps = 10;
    var step = max/totalSteps;

    function calculate(){
        start += step;
        $el.text(Math.round(start));
        if(start < max){
            setTimeout(function() {
                calculate();
            }, refresh);
        }  
    }
    calculate();
});

$（'.grow'）。每个（函数（）{
var$el=$（本）；
var max=parseInt（$el.text（）.replace（/\s/g'）；
var start=0；
var=5；
var totalSteps=10；
var步长=最大/总步长；
函数计算（）{
开始+=步进；
$el.text（数学四舍五入（开始））；
如果（开始<最大值）{
setTimeout（函数（）{
计算（）；
}，刷新）；
}  
}
计算（）；
});

这将始终在100个步骤中完成。即100*刷新=100*5=500秒。

$（'.grow'）。每个（函数（）{
$('.grow').each(function() {
    var $el = $(this);
    var max = parseInt($el.text().replace(/\s/g, ''));
    var duration = 1000; // shared duration of all elements' animation
    var refresh = 5;
    var frames = duration / refresh; // number of frames (steps)
    var start = 0;
    var step = Math.max(Math.round(max / frames), 1); // step should be >= 1
    var interval = window.setInterval(function() {
        if(start + step < max) {
            start += step;
        }
        else {
            start = max;
            clearInterval(interval);
        }
        $el.text(start);
    }, refresh);
});

var$el=$（本）；
var max=parseInt（$el.text（）.replace（/\s/g'）；
var duration=1000；//所有元素动画的共享持续时间
var=5；
var frames=duration/refresh；//帧数（步数）
var start=0；
var step=Math.max（Math.round（max/frames），1）；//步长应大于等于1
var interval=window.setInterval（函数（）{
如果（开始+步骤<最大值）{
开始+=步进；
}
否则{
开始=最大值；
间隔时间；
}
$el.text（开始）；
}，刷新）；
});

感谢您的回答，但是此选项会使最终号码与实际号码不匹配。步骤应始终为

1

，因为

clearInterval（）

必须在达到精确的最终数字时停止。@Steve因为您有

if（start>=max）

它不需要精确。如果它超过，即

start

大于

max

，这将按照您的意愿结束。尽管您选择了答案，但我正在编辑我的答案以使用

setTimeout

而不是

setInterval

。这意味着你不必清除它。它只是在最大值上停止循环。感谢您的回答，您的解决方案使最终递增的数字达到确切的实际数字。我将接受你的回答，认为你的回答最适合我的问题。我仍然面临最后一个问题，但是，我如何才能使最终的数字千与空格分隔（在动画结束或期间，没有关系）？再次感谢您的帮助。我如何才能使最后的数字以空格分隔？这是另一个与您最初的postFair不相关的问题，我将自己询问。@Steve您可以在单独的问题中提出这个问题。顺便说一句：如果我的答案能解决你的问题，你也可以投我的赞成票。我发现脚本（将

refresh

设置为

5

）与

100

以下的数字不兼容（数字不动画，并保持在

0

）。知道为什么吗？我最后推荐使用counterUp jQuery插件：