javascript - 用Javascript动态加速里程表

我试图提出一种惊人的视觉方式来显示数字。根据设置，所讨论的数字可能在0到10,000,000之间变化。因此，起初我以为我会用Javascript建立一个里程表，将里程数累加到最终的数字上。我用一个简单的setInterval函数完成了此操作，但是问题是，对于大于几千左右的数字，即使延迟为零，也要花很长时间。正如人们所期望的。

我真正想要的是一个函数，它可以查看所涉及的总数，并基于此来调整里程表的添​​加方式。也就是说，将需要某种估计的总数（例如10秒），然后找出在该时间间隔内每个间隔需要增加多少。它还会在某种程度上使用随机数，因此它不只是每秒增加一百万的“笨重”。

这是原始代码，非常明显和直接：

var totalNumber;
var currentNumber;
var changeInterval = 1; //even 0 is too slow

//later in a function scope

        interval = setInterval(function() {
                updateNumber();
            }, changeInterval);

//later
function updateNumber() {
    currentNumber++;
    if(currentNumber>=totalNumber) {
        clearInterval(interval);
    }
    document.getElementById("theNumber").innerHTML = currentNumber;
}

我在概念上无法实现非lam绕的方式时遇到了麻烦。有什么想法吗？

最佳答案

您需要根据自上次迭代以来已过去的时间来计算当前数字。我在jsfiddle上做了一个简单的例子：

http://jsfiddle.net/hwFJm/

var number = 452131,
    delay = 20,
    totalTime = 10000;

$(function() {
    count(number, delay, totalTime, $('#counter'));
});

function count(total, delay, totalTime, element, decimals) {
    var number = 0,
        startTime = newTime = new Date();

    decimals = decimals || 2;

    element.text(number);

    var interval = setInterval(function() {
        newTime = new Date();
        number = Math.min(total * ((newTime - startTime) / totalTime), total);

        number = Math.floor(number * Math.pow(10, decimals)) / Math.pow(10, decimals);

        element.text(number);
        if(number >= total) {
            clearInterval(interval);
        }
    }, delay);
}