0

我试图想出一种引人注目的视觉方式来显示数字。根据设置，有问题的数字可以在 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;
}

我在概念化实现这一点的非蹩脚方式时遇到了麻烦。有什么想法吗？

4

2 回答 2

2

您需要根据自上次迭代以来的时间来计算当前数字。我在 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);
}
于 2013-05-07T12:53:13.510 回答
1

一旦你定义

var totalTime = 10000; // 10 seconds

你知道你需要的更新数量是：

var numberOfTicks = totalTime/changeInterval;

并且您需要在每个时间间隔增加 currentNumber 的数量是：

var increment = totalNumber/numberOfTicks

只要你从零开始。为了避免四舍五入问题，而不是增加，使用计数器并每次设置值：

function updateNumber() {
    updateCounter++;
    currentNumber = increment * updateCounter;
    if(currentNumber>=totalNumber) {
        clearInterval(interval);
    }
    ....

而且我不知道我忘记了什么，但这应该足以让它继续下去。

于 2013-05-07T12:38:16.107 回答