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 相关文章推荐
[FAQ]PHP中的一些常识:类篇
Oct 09 PHP
PHP 判断常量,变量和函数是否存在
Apr 26 PHP
UTF8编码内的繁简转换的PHP类
Jul 09 PHP
php实现网站插件机制的方法
Nov 10 PHP
PHP类的静态(static)方法和静态(static)变量使用介绍
Feb 19 PHP
php命名空间学习详解
Feb 27 PHP
CI(CodeIgniter)框架中的增删改查操作
Jun 10 PHP
thinkphp中空模板与空模块的用法实例
Nov 26 PHP
php使用curl简单抓取远程url的方法
Mar 13 PHP
PHP命名空间和自动加载类
Apr 03 PHP
php 使用fopen函数创建、打开文件详解及实例代码
Sep 24 PHP
php PDO实现的事务回滚示例
Mar 23 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 截取字符串函数整理(支持gb2312和utf-8)
2010/02/16 PHP
解析PHP中的正则表达式以及模式匹配
2013/06/19 PHP
5款适合PHP使用的HTML编辑器推荐
2015/07/03 PHP
Linux服务器下PHPMailer发送邮件失败的问题解决
2017/03/04 PHP
thinkPHP5.0框架应用请求生命周期分析
2017/03/25 PHP
PHP抽象类与接口的区别实例详解
2019/05/09 PHP
php使用socket调用http和smtp协议实例小结
2019/07/26 PHP
javascript 有趣而诡异的数组
2009/04/06 Javascript
网页上的Javascript编辑器和代码格式化
2010/04/25 Javascript
浅析Javascript使用include/require
2013/11/13 Javascript
js打造数组转json函数
2015/01/14 Javascript
javascript中使用new与不使用实例化对象的区别
2015/06/22 Javascript
每天一篇javascript学习小结(Function对象)
2015/11/16 Javascript
JavaScript事件学习小结(一)事件流
2016/06/09 Javascript
AngularJS基础 ng-switch 指令简单示例
2016/08/03 Javascript
js闭包用法实例详解
2016/12/13 Javascript
解决Angular2 router.navigate刷新页面的问题
2018/08/31 Javascript
react-native滑动吸顶效果的实现过程
2019/06/03 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
2019/12/25 Javascript
JQuery实现折叠式菜单的详细代码
2020/06/03 jQuery
matlab中实现矩阵删除一行或一列的方法
2018/04/04 Python
pandas 两列时间相减换算为秒的方法
2018/04/20 Python
Tensorflow 实现修改张量特定元素的值方法
2018/07/30 Python
Python django搭建layui提交表单,表格,图标的实例
2019/11/18 Python
Python3.8安装Pygame教程步骤详解
2020/08/14 Python
Python基于staticmethod装饰器标示静态方法
2020/10/17 Python
欧洲高端品牌直销店:Fashionesta
2016/08/31 全球购物
大学生求职简历的自我评价
2013/10/14 职场文书
商务专员岗位职责范本
2014/06/29 职场文书
2014年教学工作总结
2014/11/13 职场文书
2015年党性分析材料
2014/12/19 职场文书
校园环境卫生倡议书
2015/04/29 职场文书
国家助学贷款承诺书
2015/04/30 职场文书
保密法制宣传月活动总结
2015/05/07 职场文书
Go获取两个时区的时间差
2022/04/20 Golang
Golang 实现 WebSockets 之创建 WebSockets
2022/04/24 Golang