代码如下:
<div class="count">当前在线:<span id="number"></span></div>
首先我们要定义一个动画过程,使用jQuery的animate()函数实现从一个数字到另一个数字的变换过程,以下magic_number()自定义函数将代码整合如下:
[code]function magic_number(value) {
var num = $("#number");
num.animate({count: value}, {
duration: 500,
step: function() {
num.text(String(parseInt(this.count)));
}
});
};
然后update()函数使用了jQuery的$.getJSON()向后台number.php发送了一个ajax请求,在得到PHP相应后,调用magic_number()展示最新的数字。为了能看到更好的效果,我们使用setInterval()设置代码执行的间隔时间。
复制代码代码如下:
function update() {
$.getJSON("number.php?jsonp=?", function(data) {
magic_number(data.n);
});
};
setInterval(update, 5000); //5秒钟执行一次
update();
$.getJSON("number.php?jsonp=?", function(data) {
magic_number(data.n);
});
};
setInterval(update, 5000); //5秒钟执行一次
update();
PHP代码部分:
实际项目中,我们会使用PHP获取数据库中的最新数据,然后通过PHP返回给前端。本例为了更好的演示,使用随机数字,最后以json格式返回给前端js,number.php代码如下:
复制代码代码如下:
$total_data = array(
'n' => rand(0,999)
);
echo $_GET['jsonp'].'('. json_encode($total_data) . ')';
'n' => rand(0,999)
);
echo $_GET['jsonp'].'('. json_encode($total_data) . ')';
原理其实非常的简单就是利用js settimeout实现过几秒加载一个php文件从而达到了实时显示在线人数的功能了。
- <?php
- /**
- *@ Date 2013.04.07
- *@ Author 网络剑客
- *@ Blog http://blog.csdn.net/dongsg11200
- */
- $user_online = "count.php"; //保存人数的文件
- touch($user_online);//如果没有此文件,则创建
- $timeout = 30;//30秒内没动作者,认为掉线
- $user_arr = file_get_contents($user_online);
- $user_arr = explode('#',rtrim($user_arr,'#'));print_r($user_arr);
- $temp = array();
- foreach($user_arr as $value){
- $user = explode(",",trim($value));
- if (($user[0] != getenv('REMOTE_ADDR')) && ($user[1] > time())) {//如果不是本用户IP并时间没有超时则放入到数组中
- array_push($temp,$user[0].",".$user[1]);
- }
- }
- array_push($temp,getenv('REMOTE_ADDR').",".(time() + ($timeout)).'#'); //保存本用户的信息
- $user_arr = implode("#",$temp);
- //写入文件
- $fp = fopen($user_online,"w");
- flock($fp,LOCK_EX); //flock() 不能在NFS以及其他的一些网络文件系统中正常工作
- fputs($fp,$user_arr);
- flock($fp,LOCK_UN);
- fclose($fp);
- echo "当前有".count($temp)."人在线";
- ?>