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>