雷火电竞-中国电竞赛事及体育赛事平台

歡迎來到入門教程網(wǎng)!

JavaScript

當(dāng)前位置:主頁 > 網(wǎng)絡(luò)編程 > JavaScript >

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

來源:本站原創(chuàng)|時間:2020-01-10|欄目:JavaScript|點擊:

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)載,煩請注明出處,謝謝!

上一篇:前端開發(fā)之便利店收銀系統(tǒng)代碼

欄    目: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

網(wǎng)頁制作CMS教程網(wǎng)絡(luò)編程軟件編程腳本語言數(shù)據(jù)庫服務(wù)器

如果侵犯了您的權(quán)利,請與我們聯(lián)系,我們將在24小時內(nèi)進行處理、任何非本站因素導(dǎo)致的法律后果,本站均不負(fù)任何責(zé)任。

聯(lián)系QQ:835971066 | 郵箱:835971066#qq.com(#換成@)

Copyright © 2002-2020 腳本教程網(wǎng) 版權(quán)所有