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卸载全部事件的思路详解
Apr 03 jQuery
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
jquery选择器和属性对象的操作实例分析
Jan 10 jQuery
基于ajax及jQuery实现局部刷新过程解析
Sep 12 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
PHP下MAIL的另一解决方案
2006/10/09 PHP
PHP经典的给图片加水印程序
2006/12/06 PHP
献给php初学者(入门学习经验谈)
2010/10/12 PHP
探讨:web上存漏洞及原理分析、防范方法
2013/06/29 PHP
网页的分页下标生成代码(PHP后端方法)
2016/02/03 PHP
laravel框架 api自定义全局异常处理方法
2019/10/11 PHP
PHP7新增函数
2021/03/09 PHP
浅谈Javascript中的Function与Object
2015/01/26 Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
2015/12/08 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
2016/09/24 Javascript
jQuery联动日历的实例解析
2016/12/02 Javascript
利用js定义一个导航条菜单
2017/03/14 Javascript
详解vue表单验证组件 v-verify-plugin
2017/04/19 Javascript
Vue Router的懒加载路径的解决方法
2018/06/21 Javascript
微信小程序中使用wxss加载图片并实现动画效果
2018/08/13 Javascript
Nodejs实现多文件夹文件同步
2018/10/17 NodeJs
详解在Node.js中发起HTTP请求的5种方法
2019/01/10 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
2019/01/19 Javascript
vue路由分文件拆分管理详解
2020/08/13 Javascript
python实现从网络下载文件并获得文件大小及类型的方法
2015/04/28 Python
简单实现python画圆功能
2018/01/25 Python
windows下添加Python环境变量的方法汇总
2018/05/14 Python
浅谈Django中的数据库模型类-models.py(一对一的关系)
2018/05/30 Python
一看就懂得Python的math模块
2018/10/21 Python
Django实现一对多表模型的跨表查询方法
2018/12/18 Python
python 一个figure上显示多个图像的实例
2019/07/08 Python
python计算二维矩形IOU实例
2020/01/18 Python
logging level级别介绍
2020/02/21 Python
英国最大的网上药品商店:Chemist Direct
2017/12/16 全球购物
蔻驰西班牙官网:COACH西班牙
2019/01/16 全球购物
工资收入证明样本(5篇)
2014/09/16 职场文书
委托代理人授权委托书范本
2014/09/24 职场文书
焦点访谈观后感
2015/06/11 职场文书
毕业生入职感言
2015/07/31 职场文书
Spring Data JPA框架的核心概念和Repository接口
2022/04/28 Java/Android
Redis实现主从复制方式(Master&Slave)
2022/06/21 Redis