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);

本文转自:https://www.sucaihuo.com/php/117.html 转载请注明出处!

jQuery+PHP+Ajax动态数字统计展示实例的更多相关文章

  1. PHP+jQuery中国地图热点数据统计展示实例

    一款PHP+jQuery实现的中国地图热点数据统计展示实例,当鼠标滑动到地图指定省份区域,在弹出的提示框中显示对应省份的数据信息. 首先在页面中加一个div#tip,用来展示地图信息的提示框和#map ...

  2. PHP+Mysql+jQuery实现地图区域数据统计-展示数据

    我们要在地图上有限的区块内展示更多的信息,更好的办法是通过地图交互来实现.本文将给大家讲解通过鼠标滑动到地图指定省份区域,在弹出的提示框中显示对应省份的数据信息.适用于数据统计和地图区块展示等场景. ...

  3. 【jquery】ajax 动态 改变 select下拉框选中的值

    //JS<script type="text/javascript> //ajax动态给添加原料的[商品名称]下拉框绑定selected属性 $("#origin_co ...

  4. jQuery实现AJAX定时刷新局部页面实例

    本篇文章通过两种方法实例讲解ajax定时刷新局部页面,当然方法有很多种,也可以不使用ajax来刷新页面,可以使用jquery中的append来给指定内容加东西,但是都不太实用,最实用的方法还是ajax ...

  5. jQuery之$.ajax()方法详解及实例

    1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如 ...

  6. Jquery书写AJAX动态向页面form传数据,清空之前的数据

    三种方式: 直接代码: 1.$("#mytable tr:gt(0)").remove(); 2.$("#mytable tr:not(:first)").em ...

  7. Django(二十)下拉列表-省市联动实例:jquery的ajax处理前端

    一.知识点 1.jquery的ajax请求写法 <script src="/static/js/jquery-1.12.4.min.js"></script> ...

  8. jquery ajax jsonp跨域调用实例代码

    今天研究了AJAX使用JSONP进行跨域调用的方法,发现使用GET方式和POST方式都可以进行跨域调用,这里简单分享下,方便需要的朋友 客户端代码 复制代码 代码如下: <%@ Page Lan ...

  9. 解决jQuery ajax动态新增节点无法触发点击事件的问题

    在写ajax加载数据的时候发现,后面添加进来的demo节点元素,失去了之前的点击事件.为什么点击事件失效,我们该怎么去解决呢? 其实最简单的方法就是直接在标签中写onclick="" ...

随机推荐

  1. JDBC添加为null的数据报错

    定义实体类的时候定义为了基本数据类型,不能接收null需要改为引用数据类型

  2. OpenCV3+VS2015 经常出现debug error abort()has been called问题

    方案1:图片路径错误:查看imread的路径

  3. ADO.NET中sqlserver和mysql的变量名

    因为ADO.NET标配是访问SQL SERVER数据库,那么如果需要访问MySQL数据库,那么ADO.NET五个对象也必须转换. 访问 SQL SERVER 的ADO.NET对象 1.SqlConne ...

  4. [BJOI2012]连连看

    Description Luogu4134 Solution \(l,r \le 1000\),暴力枚举是否能匹配.这是一个选匹配的问题,所以直接网络流,原图不一定是二分图咋办?拆点啊!然后直接做就行 ...

  5. MySql -- unique唯一约束

    3.UNIQUE 约束 约束唯一标识数据库表中的每条记录. 创建一张测试表 CREATE TABLE `test`.`info`( `id` ) UNSIGNED NOT NULL AUTO_INCR ...

  6. python:函数中的*args与**kwargs

    首先定义一个包含*args和**kwargs的函数,这个函数唯一的功能就是输出自己的两个参数,以此来理解*args和**kwargs def myFunc(*args, **kwargs): prin ...

  7. FP side-effects

    https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-pure-function-d1c076be ...

  8. ansible笔记(7):常用模块之包管理模块

    1.yum_repository模块 用于远程管理远程主机上的yum仓库. 参数解析: name:必须参数,用于指定要操作的唯一的仓库ID,也就是.repo配置文件中每个仓库对应的“中括号”内的仓库I ...

  9. Jquery判断单个checkbox 是否被选中

    jquery判断checked的三种方法: .attr("checked") .prop("checked") .is(":checked" ...

  10. Redis04——Redis五大数据类型 key

    key  keys *  查看当前库的所有键  exists <key>  判断某个键是否存在  type <key>   查看键的类型  del<key>  删除 ...