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

代码如下:
我们在一些应用中需要动态展示数据,比如当前在线人数,当前交易总额,当前汇率等等,前端页面需要实时刷新获取最新数据。本文将结合实例给大家介绍使用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文件从而达到了实时显示在线人数的功能了。

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/2552.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
上一篇 2017年9月29日 09:34
下一篇 2017年10月1日 09:44

相关推荐

  • 聊聊PHP中的单例模式与静态变量

    在PHP中,没有普遍意义上的静态变量。与Java、C++不同,PHP中的静态变量的存活周期仅仅是每次PHP的会话周期,所以注定了不会有Java或者C++那种静态变量。静态变量在PHP中在PHP中,静态变量的存在意义仅仅是在某个...

    2022年6月11日
    0135
  • 了解php实现的支付宝网页支付功能【基于TP5框架】

    本文实例讲述了php实现的支付宝网页支付功能。分享给大家供大家参考,具体如下:1.提交支付请求require_once './payment/zfb/pagepay/service/AlipayTradeService.php'; require_once './payment/...

    2022年6月14日
    0162
  • 如何在PHP中使用云函数。

    随着云计算的发展,云服务也越来越成为开发者们的选择。在开发过程中,使用云函数可以帮助我们更加有效地管理代码,减少服务器的压力和维护成本。在本文中,我们将讨论如何在PHP中使用云函数。一、什么是云函数云...

    2023年5月23日
    00
  • 基于PHP微信网页获取用户信息的实例分析

    很多用户在开发微信版网页的时候,需要获取用户的基本信息,比如国家,省,市,昵称等,我们接下来基于PHP语言基础详细分析一下如何成功获取。必要条件:1)公众号认证2)有网页授权获取用户基本信息的权限接口注意...

    2022年6月15日
    0148
  • PHP使用curl库发送HTTP请求。

    在Web开发中,发送HTTP请求是一项非常重要的任务。无论是通过API获取数据,还是与第三方服务进行通信,都需要使用HTTP请求来进行数据传输。在PHP中,可以使用curl库来发送HTTP请求,本文就来详细介绍curl库的使用...

    2023年5月23日
    00
  • nginx 504 Gateway Time-out如何处理

    今天程序在执行一项excel导出任务的时候 出现了nginx超时的提示 nginx 504 Gateway Time-out 排查过程: 查看该任务 发现内容是一个数据量20000条信息 每条信息有50个字段 在执行导出为excel的时候 出现了该问题 ...

    2018年4月13日
    0248
  • PHP协程框架Hyperf日志查看组件

    一、界面先上效果图:二、使用1.安装组件composer require sett/hyperf-log-viewer2.发布配置文件php bin/hyperf.php vendor:publish sett/hyperf-log-viewer3.注册路由Router::get('/logs', 'Set...

    2022年6月20日
    0222
  • PHP入门指南:解释器模式。

    随着计算机技术的不断发展,编程语言的种类也越来越多。其中一门被广泛应用于Web开发的语言是PHP。PHP是一种解释型语言,具有广泛的应用领域和良好的跨平台性。本文将为初学者介绍PHP解释器模式。一、什么是解释...

    2023年5月23日
    02

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息