Javascript 计数 onload 加载函数

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>