程式碼如下: <div class="count">當前線上：<span id="number"></span></div>

首先我們要定義一個動畫過程，使用jQuery的animate()函式實現從一個數字到另一個數字的變換過程，以下magic_number()自定義函式將程式碼整合如下：
 
[code]function magic_number(value) {
    var num = $("#number");
    num.animate({count: value}, {
        duration: 500,
        step: function() {
            num.text(String(parseInt(this.count)));
        }
    });
};

然後update()函式使用了jQuery的$.getJSON()向後臺number.php傳送了一個ajax請求，在得到PHP相應後，呼叫magic_number()展示最新的數字。為了能看到更好的效果，我們使用setInterval()設定程式碼執行的間隔時間。

複製程式碼程式碼如下: function update() {
    $.getJSON("number.php?jsonp=?", function(data) {
        magic_number(data.n);
    });
};
 
setInterval(update, 5000); //5秒鐘執行一次
update();
PHP程式碼部分：
實際專案中，我們會使用PHP獲取資料庫中的最新資料，然後通過PHP返回給前端。本例為了更好的演示，使用隨機數字，最後以json格式返回給前端js，number.php程式碼如下：
複製程式碼程式碼如下: $total_data = array(
    'n' => rand(0,999)
);    
echo $_GET['jsonp'].'('. json_encode($total_data) . ')';

原理其實非常的簡單就是利用js settimeout實現過幾秒載入一個php檔案從而達到了實時顯示線上人數的功能了。

1. <?php  
2. /** 
3. *@ Date         2013.04.07
    
4. *@ Author      網路劍客 
5. *@ Blog         http://blog.csdn.net/dongsg11200 
6. */
7. $user_online = "count.php"; //儲存人數的檔案
8. touch($user_online);//如果沒有此檔案，則建立
9. $timeout = 30;//30秒內沒動作者,認為掉線
10. $user_arr = file_get_contents($user_online);  
11. $user_arr = explode('#',rtrim($user_arr,'#'));print_r($user_arr);  
12. $temp = array();  
13. foreach($user_arras$value){  
14. $user = explode(",",trim($value));  
15. if (($user[0] != getenv('REMOTE_ADDR')) && ($user[1] > time())) {//如果不是本使用者IP並時間沒有超時則放入到陣列中
16. array_push($temp,$user[0].",".$user[1]);  
17. }  
18. }  
19. array_push($temp,getenv('REMOTE_ADDR').",".(time() + ($timeout)).'#'); //儲存本使用者的資訊
20. $user_arr = implode("#",$temp);  
21. //寫入檔案
22. $fp = fopen($user_online,"w");  
23. flock($fp,LOCK_EX); //flock() 不能在NFS以及其他的一些網路檔案系統中正常工作
24. fputs($fp,$user_arr);  
25. flock($fp,LOCK_UN);  
26. fclose($fp);  
27. echo"當前有".count($temp)."人線上";  
28. ?>