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ù)庫表里讀?。?/p>
echo mt_rand(0,999);
總結(jié)
以上所述是小編給大家介紹的jQuery+PHP+Ajax實現(xiàn)動態(tài)數(shù)字統(tǒng)計展示功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對我們網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
欄 目:JavaScript
下一篇:JS中數(shù)組實現(xiàn)代碼(倒序遍歷數(shù)組,數(shù)組連接字符串)
本文標(biāo)題:jQuery+PHP+Ajax實現(xiàn)動態(tài)數(shù)字統(tǒng)計展示功能
本文地址:http://www.jygsgssxh.com/a1/JavaScript/9385.html
您可能感興趣的文章


閱讀排行
本欄相關(guān)
- 04-02javascript點線,點線的代碼
- 04-02javascript潛力,javascript強大嗎
- 04-02javascript替換字符串,js字符串的替換
- 04-02javascript移出,js 移入移出
- 04-02包含javascript舍的詞條
- 04-02javascript并行,深入理解并行編程 豆瓣
- 04-02javascript匿名,js匿名方法
- 04-02javascript警報,JavaScript警告
- 04-02javascript遮蓋,JavaScript遮蓋PC端頁面
- 04-02javascript前身,javascript的前身
隨機閱讀
- 01-11ajax實現(xiàn)頁面的局部加載
- 04-02jquery與jsp,用jquery
- 08-05DEDE織夢data目錄下的sessions文件夾有什
- 01-10delphi制作wav文件的方法
- 01-10SublimeText編譯C開發(fā)環(huán)境設(shè)置
- 01-10C#中split用法實例總結(jié)
- 01-11Mac OSX 打開原生自帶讀寫NTFS功能(圖文
- 08-05織夢dedecms什么時候用欄目交叉功能?
- 01-10使用C語言求解撲克牌的順子及n個骰子
- 08-05dedecms(織夢)副欄目數(shù)量限制代碼修改


