倒計(jì)時(shí)一般是用來表示未來某一時(shí)刻距現(xiàn)在時(shí)刻還剩多少時(shí)間。倒計(jì)時(shí)在WEB上應(yīng)用非常廣泛,如考試系統(tǒng)倒計(jì)時(shí),團(tuán)購網(wǎng)站中的優(yōu)惠活動(dòng)倒計(jì)時(shí)等等。今天,我們來使用jQuery倒計(jì)時(shí)超級實(shí)現(xiàn)團(tuán)購秒殺效果，感興趣的朋友一起學(xué)習(xí)吧！
1.1 幫助文檔關(guān)鍵字
倒計(jì)時(shí) 秒殺 timer
1.2. 使用場景
這樣的倒計(jì)時(shí)在購物網(wǎng)站中會(huì)經(jīng)常使用到，比如秒殺，限時(shí)搶購，確認(rèn)收貨倒計(jì)時(shí)。
這個(gè)功能并不難實(shí)現(xiàn)，就是利用js的定時(shí)執(zhí)行，搜了一下網(wǎng)上的代碼，五花八門，都是一個(gè)方法，沒有做到封裝，方便使用，所以寫了一個(gè)插件，方便項(xiàng)目中使用。
1.4. 使用說明
開始使用
1、 引入oao.timer.js
2、 要顯示倒計(jì)時(shí)時(shí)間的div
<div id="timer1" end-date="2016-1-1"></div> <div id="timer2" end-date="2015/10/1 12:5:2"></div>Code:
3、 初始化倒計(jì)時(shí)
$(function(){//文檔加載完初始化倒計(jì)時(shí) $("#timer1").oaoTime(); $("#timer2").oaoTime(); })這樣就可以使用了，很簡單，這樣便于項(xiàng)目開發(fā)中統(tǒng)一使用，統(tǒng)一修改。
1.5. 上代碼
//倒計(jì)時(shí)的插件$.fn.extend({oaoTime:function(){this.each(function() { var dateStr = $(this).attr("end-date"); var endDate = new Date(dateStr.replace(/-/g,"/"));//取得指定時(shí)間的總毫秒數(shù) //now是在動(dòng)態(tài)頁面中取得服務(wù)器的時(shí)間，如果沒有定義使用客戶端時(shí)間 if(now==undefined){ now = new Date().getTime(); } var tms = endDate - now;//得到時(shí)間差 if(tms<0){alert("時(shí)間過期了");return;}$.oaoTime.timers.push({tms:tms,content:$(this)});$.oaoTime.start();});}});//倒計(jì)時(shí)的插件$.oaoTime={//倒計(jì)時(shí)容器，所有需要倒計(jì)時(shí)的時(shí)間都需要注冊到這個(gè)容器中，容器中放的是一個(gè)object，object描述了倒計(jì)時(shí)的結(jié)束時(shí)間，以及顯示時(shí)間的jquery對象(例如div)timers:[],//全局的一個(gè)倒計(jì)時(shí)狀態(tài)，init表示初始化狀態(tài)，start表示運(yùn)行中狀態(tài)，stop表示停止?fàn)顟B(tài)status:'init',//計(jì)算時(shí)間并定時(shí)刷新時(shí)間的方法，本插件的核心代碼takeCount:function(){//如果定時(shí)器沒有啟動(dòng)不執(zhí)行if(this.status != 'start')return;setTimeout("$.oaoTime.takeCount()", 1000 );var timers = this.timers;for (var i = 0, j = timers.length; i < j; i++) {//計(jì)數(shù)減一timers[i].tms -= 1000;//console.info(timers[i].tms);//計(jì)算時(shí)分秒var days = Math.floor(timers[i].tms / (1000 * 60 * 60 * 24));var hours = Math.floor(timers[i].tms / (1000 * 60 * 60)) % 24;var minutes = Math.floor(timers[i].tms / (1000 * 60)) % 60;var seconds = Math.floor(timers[i].tms / 1000) % 60;if (days < 0)days = 0;if (hours < 0)hours = 0;if (minutes < 0)minutes = 0;if (seconds < 0) seconds = 0;var newTimeText = days+"天"+hours+"小時(shí)"+minutes+"分"+seconds+"秒";timers[i].content.text(newTimeText);//console.info(newTimeText);}},//啟動(dòng)倒計(jì)時(shí)start:function(){if(this.status=='init'){this.status = 'start';this.takeCount();}},//停止倒計(jì)時(shí)stop:function(){this.status = 'stop';}}; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>無標(biāo)題文檔</title><script type="text/javascript" src="js/jquery-1.9.1.min.js"></script><script type="text/javascript" src="js/oao.timer.js"></script></head><body><ul><div id="stop">停止</div><div id="timer1" end-date="2016-1-1"></div><div id="timer2" end-date="2015/10/1 12:5:2"></div></ul></body></html><script>$(function(){$("#stop").click(function() {$.oaoTime.stop();});$("#timer1").oaoTime();$("#timer2").oaoTime();})</script>以上內(nèi)容是小編給大家介紹的基于jQuery倒計(jì)時(shí)插件實(shí)現(xiàn)團(tuán)購秒殺效果，希望對大家有所幫助！
新聞熱點(diǎn)
疑難解答
網(wǎng)友關(guān)注
