脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery 动态数字统计展示

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

 更新时间：2019年12月25日 13:39:28   作者：mrlime  
这篇文章主要介绍了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实现动态数字统计展示功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

您可能感兴趣的文章:

相关文章

  • 源码解读jQ中浏览器兼容模块support

    源码解读jQ中浏览器兼容模块support

    jquery support主要是检测浏览器兼容性，支持力度的方法，用于展示不同浏览器各自特性和bug的属性集合。作为一个静态成员，提供给jquery内部函数，告诉他们某些功能是否能用。避免了以往通过检测浏览器版本做修改。下面我们通过源码详细解读jQ中浏览器兼容模块support。
    2016-08-08
  • jquery.uploadify插件在chrome浏览器频繁崩溃解决方法

    jquery.uploadify插件在chrome浏览器频繁崩溃解决方法

    这篇文章主要介绍了jquery.uploadify插件在chrome浏览器频繁崩溃解决方法,十分的实用，遇到相同问题，需要解决的朋友可以参考下
    2015-03-03
  • jQuery 判断是否包含在数组中Array[]的方法

    jQuery 判断是否包含在数组中Array[]的方法

    下面小编就为大家带来一篇jQuery 判断是否包含在数组中Array[]的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • jquery标签选择器应用示例详解

    jquery标签选择器应用示例详解

    这篇文章主要为大家详细介绍了jquery标签选择器应用示例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-08-08
  • jQuery数据显示插件整合实现代码

    jQuery数据显示插件整合实现代码

    由于我们公司的产品涉及到很多的表格数据显示，而且每张表的字段数都很多，在工作过程中(几任同仁的努力)，整合出一套自认为较为轻巧的方案
    2011-10-10
  • 基于jQuery日历插件制作日历

    基于jQuery日历插件制作日历

    这篇文章主要介绍了基于jQuery日历插件制作日历的相关资料,需要的朋友可以参考下
    2016-03-03
  • jQuery实现参数自定义的文字跑马灯效果

    jQuery实现参数自定义的文字跑马灯效果

    这篇文章主要为大家详细介绍了jQuery实现参数自定义的文字跑马灯效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-08-08
  • jquery插件autocomplete用法示例

    jquery插件autocomplete用法示例

    这篇文章主要介绍了jquery插件autocomplete用法,结合实例形式分析了jQuery插件autocomplete与后台交互实现搜索的自动完成功能实现技巧,需要的朋友可以参考下
    2016-07-07
  • 学习从实践开始之jQuery插件开发 菜单插件开发

    学习从实践开始之jQuery插件开发 菜单插件开发

    从软件到网站，菜单可以说是无处不在。在传统应用软件开发中，一般都有现成的控件可以使用；但是在网页开发时，基本上要靠开发人员自己动手设计
    2012-05-05
  • 详解JQuery基础动画操作

    详解JQuery基础动画操作

    这篇文章主要介绍了JQuery基础动画操作，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04

最新评论