jQuery+PHP+Ajax實現(xiàn)動態(tài)數(shù)字統(tǒng)計展示功能
更新時間：2019年12月25日 13:39:28 作者：mrlime
這篇文章主要介紹了jQuery+PHP+Ajax實現(xiàn)動態(tài)數(shù)字統(tǒng)計展示功能，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
jQuery+PHP+Ajax實現(xiàn)的一款動態(tài)數(shù)字統(tǒng)計展示實例，本例是在頁面上動態(tài)展示了當前在線用戶數(shù)，當然了，你可以應用到其他更多場景中。
首先我們在#number放置要統(tǒng)計的數(shù)字：
<div class="count">當前在線：<span id="number"></span></div>
然后我們要定義一個動畫過程，使用jQuery的animate()函數(shù)實現(xiàn)從一個數(shù)字到另一個數(shù)字的變換過程，magic_number()自定義函數(shù)代碼如下：
function magic_number(value) {
var num = $("#number");
num.animate({count: value}, {
duration: 500,
step: function() {
num.text(String(parseInt(this.count)));
}
});
};
然后update()函數(shù)使用了jQuery的$.get()向后臺ajax.php發(fā)送了一個ajax請求，在得到PHP相應后，調用magic_number()展示最新的數(shù)字。為了能看到更好的效果，我們使用setInterval()每三秒執(zhí)行一次。
function update() {
$.get("ajax.php",
function(data) {
magic_number(data);
});
}
setInterval(update, 3000);
update();
我們隨機從0到999抽取一個數(shù)字，你可以從數(shù)據(jù)庫表里讀?。?/p>
echo mt_rand(0,999);
總結
以上所述是小編給大家介紹的jQuery+PHP+Ajax實現(xiàn)動態(tài)數(shù)字統(tǒng)計展示功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
相關文章
jQuery插件zTree實現(xiàn)刪除樹子節(jié)點的方法示例
這篇文章主要介紹了jQuery插件zTree實現(xiàn)刪除樹子節(jié)點的方法,結合實例形式分析了jQuery樹形插件zTree針對節(jié)點的遍歷與刪除操作相關技巧,需要的朋友可以參考下2017-03-03
本文將介紹如何使用npm安裝和使用jQuery,幫助讀者解決相關問題,并提供示例代碼,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11
很多網站的首頁都有廣告輪播，今天閑來看了一網站的首頁廣告輪播方式，是通過 jQuery的blockSlide插件實現(xiàn)的，然后自己測試了一下，很好。2010-11-11
JQuery通過AJAX從后臺獲取信息顯示在表格上并支持行選中
這篇文章主要介紹了JQuery通過AJAX從后臺獲取信息顯示在表格上并支持行選中的相關資料,需要的朋友可以參考下2015-09-09
jQuery實現(xiàn)表單input中提示文字value隨鼠標焦點移進移出而顯示或隱藏的代碼
表單input中提示文字value隨鼠標焦點移進移出而顯示或隱藏的jQuery代碼2010-03-03
也就是說如果這個圖片沒有加載成功了會怎么辦，下面為大大家分享下如何處理裂圖，感興趣的朋友可以參考下哈，希望對你有所幫助2013-05-05
我們平時在開發(fā)web程序的時候，想把一個新聞源滾動顯示新聞的條目的標題及內容摘要，而且是每次一條，有點類似csdn的滾動廣告。2009-10-10
這篇文章主要介紹了jQuery回調函數(shù)的定義及用法,以實例形式詳細分析了回調函數(shù)的原理與實現(xiàn)技巧,具有一定的參考借鑒價值,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了jQuery子選擇器與可見性選擇器,結合實例形式分析了jQuery子選擇器與可見性選擇器的功能、常見用法及相關操作注意事項,需要的朋友可以參考下2019-06-06
利用imgareaselect輔助后臺實現(xiàn)圖片上傳裁剪
這篇文章主要為大家詳細介紹了利用imgareaselect輔助后臺實現(xiàn)圖片裁剪的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03