jQuery+PHP+Ajax实现动态数字统计展示功能


Posted in jQuery onDecember 25, 2019

jQuery+PHP+Ajax实现的一款动态数字统计展示实例,本例是在页面上动态展示了当前在线用户数,当然了,你可以应用到其他更多场景中。

jQuery+PHP+Ajax实现动态数字统计展示功能

首先我们在#number放置要统计的数字:

<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的$.get()向后台ajax.php发送了一个ajax请求,在得到PHP相应后,调用magic_number()展示最新的数字。为了能看到更好的效果,我们使用setInterval()每三秒执行一次。

function update() { 
  $.get("ajax.php", 
  function(data) { 
    magic_number(data); 
  }); 
} 
setInterval(update, 3000); 
update();

我们随机从0到999抽取一个数字,你可以从数据库表里读取:

echo mt_rand(0,999);

总结

以上所述是小编给大家介绍的jQuery+PHP+Ajax实现动态数字统计展示功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

jQuery 相关文章推荐
jquery平滑滚动到顶部插件使用详解
May 08 jQuery
jQuery实现点击关注和取消功能
Jul 03 jQuery
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
jQuery实现滑动开关效果
Aug 02 jQuery
JQuery常用选择器功能与用法实例分析
Dec 23 #jQuery
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 #jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 #jQuery
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 #jQuery
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 #jQuery
基于jQuery实现可编辑的表格
Dec 11 #jQuery
jQuery实现可编辑的表格
Dec 11 #jQuery
You might like
手把手教你使用DedeCms V3的在线采集图文教程
2007/04/03 PHP
PHP register_shutdown_function()函数的使用示例
2015/06/23 PHP
详解PHP文件的自动加载(autoloading)
2018/02/04 PHP
常见的5个PHP编码小陋习以及优化实例讲解
2021/02/27 PHP
javascript 页面划词搜索JS
2009/09/28 Javascript
IE本地存储userdata的一个bug说明
2010/07/01 Javascript
判断javascript的数据类型(示例代码)
2013/12/11 Javascript
javascript下拉列表中显示树形菜单的实现方法
2015/11/17 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
2015/12/03 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
2016/01/18 Javascript
jQuery+CSS实现简单切换菜单示例
2016/07/27 Javascript
ReactNative-JS 调用原生方法实例代码
2016/10/08 Javascript
前端构建工具之gulp的语法教程
2017/06/12 Javascript
在Js页面通过POST传递参数跳转到新页面详解
2017/08/25 Javascript
Vue底层实现原理总结
2018/02/17 Javascript
使用watch监听路由变化和watch监听对象的实例
2018/02/24 Javascript
浅析java线程中断的办法
2018/07/29 Javascript
angularJs中ng-model-options设置数据同步的方法
2018/09/30 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
2019/05/09 Javascript
浅谈vue中$bus的使用和涉及到的问题
2020/07/28 Javascript
[02:59]2014DOTA2西雅图国际邀请赛 圆满落幕中国夺冠
2014/07/23 DOTA
[02:17]《辉夜杯》TRG战队巡礼
2015/10/26 DOTA
[03:15]DOTA2-DPC中国联赛1月22日Recap集锦
2021/03/11 DOTA
删除目录下相同文件的python代码(逐级优化)
2012/05/25 Python
python pandas库中DataFrame对行和列的操作实例讲解
2018/06/09 Python
从0开始的Python学习016异常
2019/04/08 Python
python+selenium+PhantomJS抓取网页动态加载内容
2020/02/25 Python
使用pandas库对csv文件进行筛选保存
2020/05/25 Python
解决HTML5中滚动到底部的事件问题
2019/08/22 HTML / CSS
中东奢侈品购物网站:Ounass
2020/09/02 全球购物
医科大学生毕业的自我评价分享
2013/11/12 职场文书
工厂门卫岗位职责
2013/11/25 职场文书
计算机科学系职业生涯规划书
2014/03/08 职场文书
地震捐款简报
2015/07/21 职场文书
Mysql binlog日志文件过大的解决
2021/10/05 MySQL
Win11如何默认打开软件界面最大化?Win11默认打开软件界面最大化的方法
2022/07/15 数码科技