您正在使用 IPV4 [3.235.130.73] 访问本站,您本次已经查看了 1 页
用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
[公益]保护绿色环境,构建和谐社会       悟空收录网      

【腾讯云】 爆款2核2G3M云服务器首年 61元,叠加红包再享折上折      
[公益] 地球是我家,绿化靠大家      
2024年 清明节 006
2024年 劳动节 033
2025年 元 旦 278
2025年 春 节 306
 
您现在的位置:首页 >> PHP >> 内容
本类新增
本类热门
PHP ajax 统计当前在线用户数程序代码
内容摘要: HTML我们在页面上放置一个显示当前在线人数的div#total以及一个用于展示访客地区分布的列表#onlinelist,默认我们在列表中放置一张与加载动画图片,后面我们用jQuery控制当鼠标滑向时展示详细列表,代码如下:divclass='demo'divid='total'当前在线:spanid='onlinenum'/span/divulid='on......
HTML

我们在页面上放置一个显示当前在线人数的div#total以及一个用于展示访客地区分布的列表#onlinelist,默认我们在列表中放置一张与加载动画图片,后面我们用jQuery控制当鼠标滑向时展示详细列表,代码如下:

<divclass="demo">

<divid="total">当前在线:<spanid="onlinenum"></span></div>

<ulid="onlinelist">

<li><imgsrc="loader.gif"></li>

</ul>

</div>

CSS

我们用CSS来渲染显示效果,为了就是不让我们的示例很难看,下面的代码中,我们使用了CSS3,时代在进步啊,所以建议使用现代浏览器预览效果,代码如下:

demo{width:150px;margin:20pxauto;font-size:14px}

#total{padding:6px10px;background:#090url(arr.png)no-repeatrighttop;color:#fff;

cursor:pointer;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;

-moz-box-shadow:003px#ccc;-webkit-box-shadow:003px#ccc;box-shadow:003px#ccc;}

#onlinelist{background:#f7f7f7;border:1pxsolid#d3d3d3;display:none;-moz-border-radius:5px;

-webkit-border-radius:5px;border-radius:5px;-moz-box-shadow:003px#ccc;

-webkit-box-shadow:003px#ccc;box-shadow:003px#ccc;}

#onlinelistli{height:20px;line-height:20px;padding:4px6px;border-bottom:1pxdotted#d9d9d9}

#onlinelistlispan{float:right}

#onlinelistli:hover{background:#fff}

Mysql

我们要准备一张数据表online,用来记录访客IP、地区及访问时间。整个示例统计过程都依赖这张表,其结构如下:

CREATETABLEIFNOTEXISTS`online`(

`id`int(11)NOTNULLAUTO_INCREMENT,

`ip`varchar(30)NOTNULL,

`province`varchar(64)NOTNULL,

`addtime`int(10)NOTNULLDEFAULT'0',

PRIMARYKEY(`id`)

)ENGINE=MyISAMDEFAULTCHARSET=utf8;

PHP

online.php用来记录访客信息,包括IP地址和地区,首先检测数据表中是否有访客IP记录,如果有,则只更新访问时间,否则,获取用户省份区域,并将用户IP即省份区域插入到表中,在此,可以判断是否存在访客的cookie记录,如果不存在则向新浪IP地址库请求获取访客的区域信息,并设置cookie值和过期时间。最后,我们删除表中已经过期的记录,统计总记录数并输出,详细请看代码注释,代码如下:

include_once('connect.php');//连接数据库

$ip=get_client_ip();//获取客户端IP

$time=time();

//查询表中是否有ip为当前访客IP的记录

$query=mysql_query("selectidfromonlinewhereip='$ip'");

if(!mysql_num_rows($query)){//如果不存在访客IP

if($_COOKIE['geoData']){//如果存在cookie,则获取用户的区域

$province=$_COOKIE['geoData'];//区域(省份)

}else{

$api="http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=json&ip=$ip";

$json=file_get_contents($api);//调用新浪IP地址库

$arr=json_decode($json,true);//解析json

$province=$arr['province'];//获取省份

setcookie('geoData',$province,$time+600);//设置cookie,设置过期时间为10分钟

}

//将访客信息插入到数据表中

mysql_query("insertintoonline(ip,province,addtime)values('$ip','$province','$time')");

}else{//如果存在,则更新该用户访问时间

mysql_query("updateonlinesetaddtime='$time'whereip='$ip'");

}

//删除已过期的记录

$outtime=$time-600;

mysql_query("deletefromonlinewhereaddtime<$outtime");

//统计总记录数,即在线用户数

list($totalOnline)=mysql_fetch_array(mysql_query("selectcount(*)fromonline"));

echo$totalOnline;//输出在线总数

mysql_close();

关于新浪IP地址库的调用,您也可以参阅根据IP定位用户所在城市信息的介绍.

函数get_client_ip()用来获取用户真实IP,代码如下:

functionget_client_ip(){

if(getenv("HTTP_CLIENT_IP")&&strcasecmp(getenv("HTTP_CLIENT_IP"),"unknown"))

$ip=getenv("HTTP_CLIENT_IP");

elseif(getenv("HTTP_X_FORWARDED_FOR")&&strcasecmp(getenv("HTTP_X_FORWARDED_FOR"),

"unknown"))

$ip=getenv("HTTP_X_FORWARDED_FOR");

elseif(getenv("REMOTE_ADDR")&&strcasecmp(getenv("REMOTE_ADDR"),"unknown"))

$ip=getenv("REMOTE_ADDR");

elseif(isset($_SERVER['REMOTE_ADDR'])&&

$_SERVER['REMOTE_ADDR']&&strcasecmp($_SERVER['REMOTE_ADDR'],"unknown"))

$ip=$_SERVER['REMOTE_ADDR'];

else

$ip="unknown";

return($ip);

}

geo.php用来统计各省份(区域)访客人数分布,通过查询数据库,并按省份分组排序即可,注意我们将最终的数据集以JSON的形式输出,便于前端ajax交互,代码如下:

include_once('connect.php');//连接数据库

//查询区域统计

$sql="selectprovince,count(*)astotalfromonlinegroupbyprovinceorderbytotaldesc";

$result=mysql_query($sql);

while($row=mysql_fetch_array($result)){

$list[]=array(

'province'=>$row['province'],

'total'=>$row['total']

);

}

echojson_encode($list);//以json格式输出

jQuery

前端页面需要做的是,页面加载时展示访客总数,即使用ajax请求online.php即可,然后当鼠标滑向统计箭头时,通过ajax请求geo.php获取各区域省份的在线人数,并以下拉的方式展现效果,代码如下:

$(function(){

$("#onlinenum").load("online.php");

$(".demo").hover(function(){

$("#onlinelist").slideDown("fast");

varstr='';

$.getJSON("geo.php",function(json){

$.each(json,function(index,array){

str=str+"<li><span>"+array['total']+"</span>"+array['province']+"</li>";

});

$("#onlinelist").html(str);

});

},function(){

$("#onlinelist").slideUp("fast");

});

});

完整实例,代码如下:

<!DOCTYPEHTML>

<html>

<head>

<metacharset="utf-8">

<title>PHP+MySQL+jQuery统计当前在线用户数</title>

<linkrel="stylesheet"type="text/css"href="../css/main.css"/>

<styletype="text/css">

.demo{width:150px;margin:20pxauto;font-size:14px;position:relative}

#total{padding:6px10px;background:#090url(arr.png)no-repeatrighttop;color:#fff;cursor:pointer;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-moz-box-shadow:003px#ccc;-webkit-box-shadow:003px#ccc;box-shadow:003px#ccc;}

#onlinelist{background:#f7f7f7;border:1pxsolid#d3d3d3;display:none;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-moz-box-shadow:003px#ccc;-webkit-box-shadow:003px#ccc;box-shadow:003px#ccc;position:absolute;top:30px;width:150px}

#onlinelistli{height:20px;line-height:20px;padding:4px6px;border-bottom:1pxdotted#d9d9d9}

#onlinelistlispan{float:right}

#onlinelistli:hover{background:#fff}

</style>

<scripttype="text/javascript"src="../js/jquery.js"></script>

<scripttype="text/javascript">

$(function(){

$("#onlinenum").load("online.php");

$(".demo").hover(function(){

$("#onlinelist").slideDown("fast");

varstr='';

$.getJSON("geo.php",function(json){

$.each(json,function(index,array){

str=str+"<li><span>"+array['total']+"</span>"+array['province']+"</li>";

});

$("#onlinelist").html(str);

});

},function(){

$("#onlinelist").slideUp("fast");

});

});

</script>

</head>

<body>

<divid="main">

<h2class="top_title"><ahref="blog-206.html"title="点击看教程">PHP+MySQL+jQuery统计当前在线用户数</a></h2>

<divclass="demo">

<divid="total">当前在线:<spanid="onlinenum"></span></div>

<ulid="onlinelist">

<li><imgsrc="loader.gif"></li>

</ul>

</div>

<br/><br/><br/><br/><br/>

</div>

</body>

</html>

版权声明:本内容来源于网络,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
上一篇:php网页数字计数器代码

 

下一篇:一个简单的php图形验证码生成程序

发布日期:2022/12/28
手机扫二维码直达本页
发布时间:13:54:54
点  击:6
录  入:齐天大圣
相关文章
Baidu
YiJiaCMS 7.3.8 build231228(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,Cloudflare提供加速防护
运行时间载入中.....