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实现的背景颜色渐变动画效果示例
Mar 24 jQuery
jQuery实现鼠标经过显示动画边框特效
Mar 24 jQuery
jQuery实现按比例缩放图片的方法
Apr 29 jQuery
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
jQuery封装animate.css的实例
Jan 04 jQuery
jquery实现搜索框功能实例详解
Jul 23 jQuery
jquery操作select常见方法大全【7种情况】
May 28 jQuery
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 jQuery
基于JQuery实现页面定时弹出广告
May 08 jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
jquery插件懒加载的示例
Oct 24 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中常用编辑器推荐
2007/01/02 PHP
php allow_url_include的应用和解释
2010/04/22 PHP
PHP处理JSON字符串key缺少双引号的解决方法
2014/09/16 PHP
Joomla语言翻译类Jtext用法分析
2016/05/05 PHP
Zend Framework分发器用法示例
2016/12/11 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
csdn 博客的css样式 v3
2009/02/24 Javascript
关于js中alert弹出窗口文本换行问题简单详细说明
2012/12/11 Javascript
jQuery中after()方法用法实例
2014/12/25 Javascript
JavaScript中的函数声明和函数表达式区别浅析
2015/03/27 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
2015/05/11 Javascript
jquery判断页面网址是否有效的两种方法
2016/12/11 Javascript
利用node.js搭建简单web服务器的方法教程
2017/02/20 Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
2017/04/21 Javascript
JavaScript中undefined和null的区别
2017/05/03 Javascript
Angular4绑定html内容出现警告的处理方法
2017/11/03 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
2018/10/31 Javascript
vue elementUI使用tabs与导航栏联动
2019/06/21 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
2019/12/30 Javascript
VUE使用axios调用后台API接口的方法
2020/08/03 Javascript
js实现拖拽与碰撞检测
2020/09/18 Javascript
Vue单页面应用中实现Markdown渲染
2021/02/14 Vue.js
python实现kMeans算法
2017/12/21 Python
python tensorflow学习之识别单张图片的实现的示例
2018/02/09 Python
python进度条显示之tqmd模块
2020/08/22 Python
python通过函数名调用函数的几种场景
2020/09/23 Python
使用 CSS3 中@media 实现网页自适应的示例代码
2020/03/24 HTML / CSS
团干部培训方案
2014/06/03 职场文书
社团活动总结报告
2014/06/27 职场文书
2014年信访工作总结
2014/11/17 职场文书
2014年乡镇纪委工作总结
2014/12/19 职场文书
学生个人总结范文
2015/02/15 职场文书
开学第一天的感想
2015/08/10 职场文书
MySQL infobright的安装步骤
2021/04/07 MySQL
完美解决golang go get私有仓库的问题
2021/05/05 Golang
MySQL库表太大怎么办? 数据库分库分表项目实践
2022/04/11 MySQL