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 轉載請註明出處！