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 相关文章推荐
PHP中的正规表达式(二)
Oct 09 PHP
php之对抗Web扫描器的脚本技巧
Oct 01 PHP
使用Limit参数优化MySQL查询的方法
Nov 12 PHP
PHP在特殊字符前加斜杠的实现代码
Jul 17 PHP
深入php-fpm的两种进程管理模式详解
Jun 03 PHP
浅谈web上存漏洞及原理分析、防范方法(安全文件上存方法)
Jun 29 PHP
php打印输出棋盘的实现方法
Dec 23 PHP
Yii2 rbac权限控制之rule教程详解
Jun 23 PHP
php版微信自动获取收货地址api用法示例
Sep 22 PHP
php下载远程大文件(获取远程文件大小)的实例
Jun 17 PHP
PHP 7.4 新语法之箭头函数实例详解
May 09 PHP
PHP字符串和十六进制如何实现互相转换
Jul 16 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中判断文件存在是用file_exists还是is_file的整理
2012/09/12 PHP
php url路由入门实例
2014/04/23 PHP
ThinkPHP中where()使用方法详解
2016/04/19 PHP
php PDO异常处理详解
2016/11/20 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
php抽象方法和普通方法的区别点总结
2019/10/13 PHP
滚动经典最新话题[prototype框架]下编写
2006/10/03 Javascript
Javascript学习笔记-详解in运算符
2011/09/13 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
2015/03/26 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
2016/04/19 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
2016/05/24 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
JavaScript优化以及前段开发小技巧
2017/02/02 Javascript
Cocos2d实现刮刮卡效果
2018/12/20 Javascript
vuejs实现下拉框菜单选择
2020/10/23 Javascript
从零学python系列之从文件读取和保存数据
2014/05/23 Python
pycharm 将django中多个app放到同个文件夹apps的处理方法
2018/05/30 Python
pymysql之cur.fetchall() 和cur.fetchone()用法详解
2020/05/15 Python
python logging模块的使用
2020/09/07 Python
HTML5事件方法全部汇总
2016/05/12 HTML / CSS
蒂芙尼澳大利亚官方网站:Tiffany&Co. Australia
2017/08/27 全球购物
英国豪华家具和经典家居饰品购物网站:OKA
2020/06/05 全球购物
莫斯科制造商的廉价皮大衣:Fursk
2020/06/09 全球购物
小米官方旗舰店:Xiaomi
2020/08/07 全球购物
启动一个线程是用run()还是start()
2016/12/25 面试题
个人简历自我鉴定
2013/10/11 职场文书
运动会入场式解说词
2014/02/18 职场文书
社区春季防火方案
2014/06/02 职场文书
合作协议书模板
2014/10/10 职场文书
辩护意见书
2015/06/04 职场文书
会计专业2019暑假实习报告
2019/06/21 职场文书
2019经典广告词集锦!
2019/07/02 职场文书
2019年特色火锅店的创业计划书模板
2019/08/28 职场文书
修辞手法有哪些?
2019/08/29 职场文书
python小程序之飘落的银杏
2021/04/17 Python
使用redis生成唯一编号及原理示例详解
2021/09/15 Redis