Question

我正在创建一个脚本，用于刷新＆＃34;观众＆＃34;计数显示在我的网站顶部。

使用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输出：

我想添加＆＃34;向上/向下计数＆＃34;效果，例如，如果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>

Javascript计算onload加载功能

1 个答案: