zoukankan      html  css  js  c++  java
  • jQuery+PHP+Ajax动态数字统计展示实例

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

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

    <div class="count">当前在线:<span id="number"></span></div>


    然后我们要定义一个动画过程,使用jQuery的animate()函数实现从一个数字到另一个数字的变换过程,magic_number()自定义函数代码如下:

    1 function magic_number(value) {  
    2     var num = $("#number");  
    3     num.animate({count: value}, {  
    4         duration: 500,  
    5         step: function() {  
    6             num.text(String(parseInt(this.count)));  
    7         }  
    8     });  
    9 };


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

    1 function update() { 
    2     $.get("ajax.php", 
    3     function(data) { 
    4         magic_number(data); 
    5     }); 
    6 } 
    7 setInterval(update, 3000); 
    8 update();


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

    echo mt_rand(0,999);


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

  • 相关阅读:
    spark-2.0.0与hive-1.2.1整合
    kafka_2.11-0.10.0.0安装步骤
    hive-1.2.1安装步骤
    linux时间编程
    gdb与coredump
    linux下静态库、动态库的创建与使用
    linux常用工具
    js数组、内置对象、自定义对象
    JS学习五(js中的事件)
    JS学习四(BOM DOM)
  • 原文地址:https://www.cnblogs.com/mrlime/p/12095112.html
Copyright © 2011-2022 走看看