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