PHP与jquery实时显示网站在线人数实例详解


Posted in PHP onDecember 02, 2016

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

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

<div class="count">当前在线:<span id="number"></span></div>

 首先我们要定义一个动画过程,使用jQuery的animate()函数实现从一个数字到另一个数字的变换过程,以下magic_number()自定义函数将代码整合如下:

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 相关文章推荐
SMARTY学习手记
Jan 04 PHP
php设计模式 Adapter(适配器模式)
Jun 26 PHP
PHP实现使用优酷土豆视频地址获取swf播放器分享地址
Jun 05 PHP
PHP下通过QRCode类库创建中间带网站LOGO的二维码
Jul 12 PHP
从零开始学YII2框架(五)快速生成代码工具 Gii 的使用
Aug 20 PHP
php计算整个目录大小的方法
Jun 19 PHP
CodeIgniter钩子用法实例详解
Jan 20 PHP
Laravel重写用户登录简单示例
Oct 08 PHP
PHP 根据key 给二维数组分组
Dec 09 PHP
php实现文件上传及头像预览功能
Jan 15 PHP
php cli模式下获取参数的方法
May 05 PHP
PHP 99乘法表的几种实现代码
Oct 13 PHP
谈谈php对接芝麻信用踩的坑
Dec 01 #PHP
PHP自定义函数获取汉字首字母的方法
Dec 01 #PHP
phpmailer绑定邮箱的实现方法
Dec 01 #PHP
thinkPHP实现多字段模糊匹配查询的方法
Dec 01 #PHP
thinkPHP商城公告功能开发问题分析
Dec 01 #PHP
thinkPHP订单数字提醒功能的实现方法
Dec 01 #PHP
PHP 芝麻信用接入的注意事项
Dec 01 #PHP
You might like
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
用javascript实现画板的代码
2007/09/05 Javascript
jquery 打开窗口返回值实现代码
2010/03/04 Javascript
一个JQuery写的点击上下滚动的小例子
2011/08/27 Javascript
关于Jquery操作Cookie取值错误的解决方法
2013/08/26 Javascript
jQuery循环动画与获取组件尺寸的方法
2015/02/02 Javascript
JS和css实现检测移动设备方向的变化并判断横竖屏幕
2015/05/25 Javascript
JS实现简单路由器功能的方法
2015/05/27 Javascript
JavaScript实现斗地主游戏的思路
2016/02/29 Javascript
Vue应用部署到服务器的正确方式
2017/07/15 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
2017/07/28 Javascript
react router4+redux实现路由权限控制的方法
2018/05/03 Javascript
JavaScript 高性能数组去重的方法
2018/09/20 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
2019/02/28 Javascript
关于layui时间回显问题的解决方法
2019/09/24 Javascript
微信小程序实现按字母排列选择城市功能
2019/11/25 Javascript
前端深入理解Typescript泛型概念
2020/03/09 Javascript
RxJS在TypeScript中的简单使用详解
2020/04/13 Javascript
vue中jsonp插件的使用方法示例
2020/09/10 Javascript
python操作字典类型的常用方法(推荐)
2016/05/16 Python
python OpenCV学习笔记之绘制直方图的方法
2018/02/08 Python
linux查找当前python解释器的位置方法
2019/02/20 Python
Python Django 简单分页的实现代码解析
2019/08/21 Python
如何用OpenCV -python3实现视频物体追踪
2019/12/04 Python
Python3查找列表中重复元素的个数的3种方法详解
2020/02/13 Python
总结Pyinstaller的坑及终极解决方法(小结)
2020/09/21 Python
专业实习自我鉴定
2013/10/29 职场文书
中专生毕业自我鉴定
2013/11/01 职场文书
建筑行业的大学生自我评价
2013/12/08 职场文书
旅游网创业计划书
2014/01/31 职场文书
公司薪酬管理制度
2014/01/31 职场文书
英文自荐信常用句子
2014/03/26 职场文书
环保建议书400字
2014/05/14 职场文书
项目负责人岗位职责
2015/02/15 职场文书
Python破解极验滑动验证码详细步骤
2021/05/21 Python
Go语言grpc和protobuf
2022/04/13 Golang