2010-07-27 42 views
0

尋找一個我可以理想的腳本輸入一個起始數字和一個開始日期,然後根據我設置的速率繼續增加。 1每秒。根據當前時間和開始時間之間的差異,該腳本將理想地計算應該在哪個數字上。jQuery或Javascript連續計數器(countup)

這意味着看起來像它顯示一個活的計數。

理想的情況下,像櫃檯上http://sendgrid.com/

有沒有人有一個鏈接或插件或解決方案,他們可以分享?

如果數字可以用數字的圖像取代更好,但起點將不勝感激。

感謝

回答

1

如果你想有一個JavaScript的唯一的解決方案,你可以做這樣一個div:

<div id="counter"></div> 

然後某處使用下面的腳本在頁面上:

var START_DATE = new Date("July 27, 2010 13:30:00"); // put in the starting date here 
var INTERVAL = 1; // in seconds 
var INCREMENT = 2; // increase per tick 
var START_VALUE = 9001; // initial value when it's the start date 
var count = 0; 

window.onload = function() 
{ 
var msInterval = INTERVAL * 1000; 
var now = new Date(); 
count = parseInt((now - START_DATE)/msInterval) * INCREMENT + START_VALUE; 
document.getElementById('counter').innerHTML = count; 
setInterval("count += INCREMENT; document.getElementById('counter').innerHTML = count;", msInterval); 
} 

可以使用技術類似於獲取圖像的方法,或者您可以使用CSS對counter div進行樣式設置。

+0

完美,謝謝:) – Lee 2010-07-28 15:38:28

5

也許你有一個頁面,這個標記:

<div id='counter'><%= some_number_from_database_or_similar() %></div> 

所以你可以寫一個這樣的腳本:

var INTERVAL = 1; 

$(document).ready(function() { 
    var delay = INTERVAL * 1000; 
    var target = $('#counter'); 
    var counter = parseInt(target.text(), 10); 
    setInterval(function() { 
    target.text(counter++); 
    }, delay); 
}); 

這不是因爲你完全準確不能確定這個函數每秒鐘會被調用,正好是,但它會非常接近(你真的需要它的準確度有多高,無論如何?)。或者,您可以創建一個new Date()並獲取它的時間戳,然後每隔一段時間創建一個,然後計算已經過去的實際秒數......看起來太昂貴而不值得。

至於使用圖像的數字,你可以只改變間隔功能是這樣的:

function() { 
    var counterString = (counter++).toString(); 
    var chunks = []; 
    for(var i = 0; i < counterString.length; i++) { 
    chunks.push("<img src='/images/numbers/" + counterString[i] + ".png' />"); 
    } 
    target.html(chunks.join('')); 
} 
+0

太棒了,謝謝。 雖然我想包括開始日期的原因取決於時間間隔,但如果用戶返回第二天計數將高達100,000,然後第二天200,000等,準確性並不那麼重要。因此,它看起來像實時數據,但它實際上是一個粗略的估計 – Lee 2010-07-27 16:22:41

+0

因此,您可以將'counter'變量設置爲頁面加載時的適當起點(通過php,rails等)。 – rfunduk 2010-07-27 17:00:23

+0

我會稍微更新我的答案以支持這一點。 – rfunduk 2010-07-27 17:01:07