怎么用jQuery+PHP+Ajax實(shí)現動(dòng)態(tài)數字統計展示功能

這篇文章主要介紹“怎么用jQuery+PHP+Ajax實(shí)現動(dòng)態(tài)數字統計展示功能”，在日常操作中，相信很多人在怎么用jQuery+PHP+Ajax實(shí)現動(dòng)態(tài)數字統計展示功能問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對大家解答”怎么用jQuery+PHP+Ajax實(shí)現動(dòng)態(tài)數字統計展示功能”的疑惑有所幫助！接下來(lái)，請跟著(zhù)小編一起來(lái)學(xué)習吧！

jQuery+PHP+Ajax實(shí)現的一款動(dòng)態(tài)數字統計展示實(shí)例，本例是在頁(yè)面上動(dòng)態(tài)展示了當前在線(xiàn)用戶(hù)數，當然了，你可以應用到其他更多場(chǎng)景中。

首先我們在#number放置要統計的數字：

<div class="count">當前在線(xiàn)：<span id="number"></span></div>

然后我們要定義一個(gè)動(dòng)畫(huà)過(guò)程，使用jQuery的animate()函數實(shí)現從一個(gè)數字到另一個(gè)數字的變換過(guò)程，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發(fā)送了一個(gè)ajax請求，在得到PHP相應后，調用magic_number()展示最新的數字。為了能看到更好的效果，我們使用setInterval()每三秒執行一次。

function update() { 
    $.get("ajax.php", 
    function(data) { 
        magic_number(data); 
    }); 
} 
setInterval(update, 3000); 
update();

我們隨機從0到999抽取一個(gè)數字，你可以從數據庫表里讀?。?br/>

echo mt_rand(0,999);