尋找一個我可以理想的腳本輸入一個起始數字和一個開始日期,然後根據我設置的速率繼續增加。 1每秒。根據當前時間和開始時間之間的差異,該腳本將理想地計算應該在哪個數字上。jQuery或Javascript連續計數器(countup)
這意味着看起來像它顯示一個活的計數。
理想的情況下,像櫃檯上http://sendgrid.com/
有沒有人有一個鏈接或插件或解決方案,他們可以分享?
如果數字可以用數字的圖像取代更好,但起點將不勝感激。
感謝
尋找一個我可以理想的腳本輸入一個起始數字和一個開始日期,然後根據我設置的速率繼續增加。 1每秒。根據當前時間和開始時間之間的差異,該腳本將理想地計算應該在哪個數字上。jQuery或Javascript連續計數器(countup)
這意味着看起來像它顯示一個活的計數。
理想的情況下,像櫃檯上http://sendgrid.com/
有沒有人有一個鏈接或插件或解決方案,他們可以分享?
如果數字可以用數字的圖像取代更好,但起點將不勝感激。
感謝
如果你想有一個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進行樣式設置。
也許你有一個頁面,這個標記:
<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(''));
}
完美,謝謝:) – Lee 2010-07-28 15:38:28