PHP + jQuery 實現網站在線人數即時動態顯示：AJAX 輪詢與數字動畫效果

PHP + jQuery 實現網站在線人數即時動態顯示：AJAX 輪詢與數字動畫效果

本文展示如何結合 PHP 後端、jQuery 前端、AJAX 輪詢與數字滾動動畫，打造一個無需刷新頁面即可即時更新的「在線人數」展示組件。適用於統計大屏、直播間人氣展示、電商促銷場景等。

前端 HTML 結構

<div class="count">
    當前在線：<span id="number"></span>
</div>

核心 JavaScript 邏輯

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script>
// 1. 數字滾動動畫函數
function magic_number(value) {
    var $num = $("#number");
    $num.animate({count: value}, {
        duration: 500,
        step: function() {
            $num.text(String(parseInt(this.count)));
        }
    });
}

// 2. AJAX 輪詢更新函數
function update() {
    $.getJSON("number.php?jsonp=?", function(data) {
        magic_number(data.n);  // data.n 為後端返回的在線人數
    });
}

// 3. 啟動：首次執行 + 每 5 秒輪詢
update();
setInterval(update, 5000);
</script>

動畫原理解析

• animate({count: value})：利用 jQuery 自定義屬性動畫，從當前數字平滑過渡到目標值
• step 回調：每幀執行，將中間值取整後更新 DOM 文本
• duration: 500：動畫持續 500ms，體驗流暢不拖沓

PHP 後端實現 (number.php)

<?php
// 實際項目中應查詢 Redis/Memcached/數據庫獲取真實在線數
// 此處用隨機數模擬演示
$total_data = array('n' => rand(0, 999));

// 支持 JSONP 跨域調用
$callback = isset($_GET['jsonp']) ? $_GET['jsonp'] : 'callback';
header('Content-Type: application/javascript; charset=utf-8');
echo $callback . '(' . json_encode($total_data) . ')';
?>

生產環境優化建議

擴展應用場景

• 📊 實時交易額：雙十一大屏滾動金額
• 📈 股票/匯率報價：毫秒級更新價格數字
• 👥 直播間觀看人數：進出房間即時增減
• 📦 庫存倒計時：搶購剩餘量動態減少

完整文件結構

project/
├── index.html      # 包含 HTML + JS 代碼
└── number.php      # 後端數據接口

這個方案以「極簡代碼、零依賴、即插即用」為特點，適合快速原型驗證或中小型項目。隨著業務增長，建議逐步演進至 WebSocket 架構以獲得更低延遲與更高併發承載能力。