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 转载请注明出处!

  • 相关阅读:
    前端性能优化
    CSS实现文字在容器中对齐方式
    spring里面的context:component-scan
    Builder模式
    idea无法新建maven项目
    Java-位运算
    pg数据库数据表异常挂起
    Java-多线程与单例
    Java-数据结构之二叉树练习
    Java-JNA使用心得
  • 原文地址:https://www.cnblogs.com/mrlime/p/12095112.html
Copyright © 2011-2022 走看看