Javascript 计数onload加载函数

Question

我正在创建一个脚本，它将刷新显示在我网站顶部的 "viewers" 个计数。

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

我想添加一个"count up/down"效果，例如如果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加载函数

Javascript count up onload load function

javascript

count

load

onload

effect