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

本文轉自： 轉載請註明出處!