jQuery+PHP+Ajax實現動態(tài)數字統(tǒng)計展示功能

更新時間：2019年12月25日 13:39:28 作者：mrlime

這篇文章主要介紹了jQuery+PHP+Ajax實現動態(tài)數字統(tǒng)計展示功能，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下

jQuery+PHP+Ajax實現的一款動態(tài)數字統(tǒng)計展示實例，本例是在頁面上動態(tài)展示了當前在線用戶數，當然了，你可以應用到其他更多場景中。

首先我們在#number放置要統(tǒng)計的數字：

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

然后我們要定義一個動畫過程，使用jQuery的animate()函數實現從一個數字到另一個數字的變換過程，magic_number()自定義函數代碼如下：

function magic_number(value) { 
  var num = $("#number"); 
  num.animate({count: value}, { 
    duration: 500, 
    step: function() { 
      num.text(String(parseInt(this.count))); 
    } 
  }); 
};

然后update()函數使用了jQuery的$.get()向后臺ajax.php發(fā)送了一個ajax請求，在得到PHP相應后，調用magic_number()展示最新的數字。為了能看到更好的效果，我們使用setInterval()每三秒執(zhí)行一次。

function update() { 
  $.get("ajax.php", 
  function(data) { 
    magic_number(data); 
  }); 
} 
setInterval(update, 3000); 
update();

我們隨機從0到999抽取一個數字，你可以從數據庫表里讀取：

echo mt_rand(0,999);

總結

以上所述是小編給大家介紹的jQuery+PHP+Ajax實現動態(tài)數字統(tǒng)計展示功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！

您可能感興趣的文章:

源碼解讀jQ中瀏覽器兼容模塊support
jquery support主要是檢測瀏覽器兼容性，支持力度的方法，用于展示不同瀏覽器各自特性和bug的屬性集合。作為一個靜態(tài)成員，提供給jquery內部函數，告訴他們某些功能是否能用。避免了以往通過檢測瀏覽器版本做修改。下面我們通過源碼詳細解讀jQ中瀏覽器兼容模塊support。
2016-08-08
jquery.uploadify插件在chrome瀏覽器頻繁崩潰解決方法
這篇文章主要介紹了jquery.uploadify插件在chrome瀏覽器頻繁崩潰解決方法,十分的實用，遇到相同問題，需要解決的朋友可以參考下
2015-03-03
jQuery 判斷是否包含在數組中Array[]的方法
下面小編就為大家?guī)硪黄猨Query 判斷是否包含在數組中Array[]的方法。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-08-08
jquery標簽選擇器應用示例詳解
這篇文章主要為大家詳細介紹了jquery標簽選擇器應用示例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-08-08
jQuery數據顯示插件整合實現代碼
由于我們公司的產品涉及到很多的表格數據顯示，而且每張表的字段數都很多，在工作過程中(幾任同仁的努力)，整合出一套自認為較為輕巧的方案
2011-10-10
基于jQuery日歷插件制作日歷
這篇文章主要介紹了基于jQuery日歷插件制作日歷的相關資料,需要的朋友可以參考下
2016-03-03
jQuery實現參數自定義的文字跑馬燈效果
這篇文章主要為大家詳細介紹了jQuery實現參數自定義的文字跑馬燈效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-08-08
jquery插件autocomplete用法示例
這篇文章主要介紹了jquery插件autocomplete用法,結合實例形式分析了jQuery插件autocomplete與后臺交互實現搜索的自動完成功能實現技巧,需要的朋友可以參考下
2016-07-07
學習從實踐開始之jQuery插件開發(fā) 菜單插件開發(fā)
從軟件到網站，菜單可以說是無處不在。在傳統(tǒng)應用軟件開發(fā)中，一般都有現成的控件可以使用；但是在網頁開發(fā)時，基本上要靠開發(fā)人員自己動手設計
2012-05-05
詳解JQuery基礎動畫操作
這篇文章主要介紹了JQuery基礎動畫操作，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-04-04