Javascript count up on load load

Question

我正在創建一個腳本，它將刷新顯示在我網站頂部的「查看者」數量。

的Javascript：

<script type="text/javascript"> 
window.onload = function(){ 
var auto_refresh = setInterval(
function() 
{ 
$('#viewers').load('viewers.php'); 
}, 5000); 
} 
</script> 

HTML：

<span id="viewers">0</span> 

viewers.php輸出：

100 

我想補充一個 「上/下數」 的效果，所以例如，如果viewers.php輸出200，它將在5000毫秒後計數，如果此計數降至50，則100將計數降至50.

感謝您的幫助！

Answer 1

這是一個解決方案，可以在給定的延遲時間內對新的觀衆人數進行計數。它似乎運行速度有點慢，可能是由於我的代碼在setInterval內延遲了。

只要您想更新計數，只需撥打setViewers即可。

<script type="text/javascript"> 
window.onload = function(){ 


var delay = 4000; 
var viewers = $("#viewers"); 
var auto_refresh = setInterval(
function() 
{ 
    var curViewers = Number(viewers.html()) 
    $('#viewers').load('viewers.php', function(){ 
    var newViewers = Number(viewers.html()); 
    setViewers(curViewers, newViewers); 
    }); 

}, 5000); 



function setViewers(currentNum, newNum){ 
    if(currentNum == newNum) return; 
    var updateSpeed = delay/Math.abs(currentNum - newNum); 
    var countDir = currentNum > newNum ? -1 : 1; 
    var timer = setInterval(function(){  
    currentNum += countDir; 
    viewers.text(currentNum); 
    if(currentNum == newNum) clearInterval(timer); 
    }, updateSpeed); 
} 
} 
</script>