PHP+jquery实时显示网站在线人数的方法


Posted in PHP onJanuary 04, 2015

本文实例讲述了PHP+jquery实时显示网站在线人数的方法。分享给大家供大家参考。具体分析如下:

在线人数最简单的就是直接利用js调用php,这样可以显示出有多少人访问了本站,如果要在用户未刷新页面的状态实时显示用户在线人数,我们可以利用jquery ajax来实现。

我们在一些应用中需要动态展示数据,比如当前在线人数,当前交易总额,当前汇率等等,前端页面需要实时刷新获取最新数据。这里我们将结合实例给大家介绍使用jQuery和PHP来实现动态数字展示效果。

本例假设要在页面上动态展示(无需刷新整个页面,只是局部刷新动态数字)当前在线用户数,常见在一些统计平台上应用。在HTML页面中只需定义以下结构:
 

<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();

PHP代码部分:
实际项目中,我们会使用PHP获取数据库中的最新数据,然后通过PHP返回给前端。本例为了更好的演示,使用随机数字,最后以json格式返回给前端js,number.php代码如下:
$total_data = array( 

    'n' => rand(0,999) 

);     

echo $_GET['jsonp'].'('. json_encode($total_data) . ')';

原理其实非常的简单就是利用js settimeout实现过几秒加载一个php文件从而达到了实时显示在线人数的功能了。

希望本文所述对大家的php程序设计有所帮助。

PHP 相关文章推荐
PHP实现文件安全下载
Oct 09 PHP
关于mysql 字段的那个点为是定界符
Jan 15 PHP
php学习之 循环结构实现代码
Jun 09 PHP
解析PHP函数array_flip()在重复数组元素删除中的作用
Jun 27 PHP
windows下安装php的memcache模块的方法
Apr 07 PHP
PHP获取当前日期和时间及格式化方法参数
May 11 PHP
yii,CI,yaf框架+smarty模板使用方法
Dec 29 PHP
Zend Framework路由器用法实例详解
Dec 11 PHP
php实现微信支付之企业付款
May 30 PHP
php生成HTML文件的类方法
Oct 11 PHP
PHP 自动加载类原理与用法实例分析
Apr 14 PHP
Thinkphp5+Redis实现商品秒杀代码实例讲解
Dec 29 PHP
thinkphp备份数据库的方法分享
Jan 04 #PHP
js+php实现静态页面实时调用用户登陆状态的方法
Jan 04 #PHP
php+mysql实现用户注册登陆的方法
Jan 03 #PHP
php静态文件生成类实例分析
Jan 03 #PHP
php采集内容中带有图片地址的远程图片并保存的方法
Jan 03 #PHP
php中socket通信机制实例详解
Jan 03 #PHP
php读取csv数据保存到数组的方法
Jan 03 #PHP
You might like
php数据库连接
2006/10/09 PHP
JavaScript使用过程中需要注意的地方和一些基本语法
2010/08/26 Javascript
javascript代码编写需要注意的7个小细节小结
2011/09/21 Javascript
JavaScript操作Cookie方法实例分析
2015/05/27 Javascript
jquery实现的Accordion折叠面板效果代码
2015/09/02 Javascript
JSON+Jquery省市区三级联动
2016/01/13 Javascript
利用JS实现数字增长
2016/07/28 Javascript
一个简单的JavaScript Map实例(分享)
2016/08/03 Javascript
JavaScript SHA512加密算法详细代码
2016/10/06 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
2016/12/08 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
2017/02/08 Javascript
Nodejs实现短信验证码功能
2017/02/09 NodeJs
微信小程序开发之相册选择和拍照详解及实例代码
2017/02/22 Javascript
Vue2.0结合webuploader实现文件分片上传功能
2018/03/09 Javascript
vue地区选择组件教程详解
2018/05/04 Javascript
解决linux下node.js全局模块找不到的问题
2018/05/15 Javascript
vue 1.0 结合animate.css定义动画效果
2018/07/11 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
2018/09/14 Javascript
详解几十行代码实现一个vue的状态管理
2019/01/28 Javascript
JS函数基本定义与用法示例
2020/01/15 Javascript
[01:21]DOTA2新纪元-7.0新版本即将开启!
2016/12/11 DOTA
python实现博客文章爬虫示例
2014/02/26 Python
Python中请使用isinstance()判断变量类型
2014/08/25 Python
基于scrapy实现的简单蜘蛛采集程序
2015/04/17 Python
python3.0 模拟用户登录,三次错误锁定的实例
2017/11/02 Python
python3调用R的示例代码
2018/02/23 Python
Python json模块dumps、loads操作示例
2018/09/06 Python
Python Pandas 获取列匹配特定值的行的索引问题
2019/07/01 Python
用Python进行websocket接口测试
2020/10/16 Python
用HTML5的canvas实现一个炫酷时钟效果
2016/05/20 HTML / CSS
介绍一下Linux内核的排队自旋锁
2014/08/27 面试题
销售业务实习自我鉴定
2013/09/23 职场文书
党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
2015年党风廉政建设责任书
2015/01/29 职场文书
百年校庆感言
2015/08/01 职场文书
golang slice元素去重操作
2021/04/30 Golang