在Javascript中動態加速里程錶

我試圖想出一個醒目的視覺方式來顯示一個數字。根據設置，有問題的號碼可以在0到10,000,000左右之間變化。所以最初我以爲我會在Javascript中設置一個里程錶，這隻會加起來到最後的數字。我用一個簡單的setInterval函數完成了這個工作，但問題是，對於大於幾千個數字的數字，即使是零延遲，也需要花費太長時間。正如人們所期望的。在Javascript中動態加速里程錶

我真正喜歡的是一個功能可以看看，在總數中的問題，調整里程錶的如何添加跑到基於這一點。也就是說，這需要某種估計的總數（比如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; 
}

我無法概念化非跛腳的方式來實現這一點。有什麼想法嗎？

來源

2013-05-07 nucleon

您需要根據自上次迭代以來的時間來計算當前數字。我上的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-07 12:53:13 thebreiflabb

這是美麗的，謝謝！這基本上是我想要的，我只是很難將其概念化。 – nucleon 2013-05-07 16:33:08

一旦定義

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-07 12:38:16

在Javascript中動態加速里程錶

回答

相關問題