基于jQuery倒計時插件實現(xiàn)團購秒殺效果
倒計時一般是用來表示未來某一時刻距現(xiàn)在時刻還剩多少時間。倒計時在WEB上應(yīng)用非常廣泛,如考試系統(tǒng)倒計時,團購網(wǎng)站中的優(yōu)惠活動倒計時等等。今天,我們來使用jQuery倒計時超級實現(xiàn)團購秒殺效果,感興趣的朋友一起學(xué)習(xí)吧!
1.1 幫助文檔關(guān)鍵字
倒計時 秒殺 timer
1.2. 使用場景
這樣的倒計時在購物網(wǎng)站中會經(jīng)常使用到,比如秒殺,限時搶購,確認收貨倒計時。
這個功能并不難實現(xiàn),就是利用js的定時執(zhí)行,搜了一下網(wǎng)上的代碼,五花八門,都是一個方法,沒有做到封裝,方便使用,所以寫了一個插件,方便項目中使用。
1.4. 使用說明
開始使用
1、 引入oao.timer.js
2、 要顯示倒計時時間的div
<div id="timer1" end-date="2016-1-1"></div> <div id="timer2" end-date="2015/10/1 12:5:2"></div>Code:
3、 初始化倒計時
$(function(){//文檔加載完初始化倒計時 $("#timer1").oaoTime(); $("#timer2").oaoTime(); })
這樣就可以使用了,很簡單,這樣便于項目開發(fā)中統(tǒng)一使用,統(tǒng)一修改。
1.5. 上代碼
//倒計時的插件 $.fn.extend({ oaoTime:function(){ this.each(function() { var dateStr = $(this).attr("end-date"); var endDate = new Date(dateStr.replace(/-/g,"/"));//取得指定時間的總毫秒數(shù) //now是在動態(tài)頁面中取得服務(wù)器的時間,如果沒有定義使用客戶端時間 if(now==undefined){ now = new Date().getTime(); } var tms = endDate - now;//得到時間差 if(tms<0){alert("時間過期了");return;} $.oaoTime.timers.push({tms:tms,content:$(this)}); $.oaoTime.start(); }); } }); //倒計時的插件 $.oaoTime={ //倒計時容器,所有需要倒計時的時間都需要注冊到這個容器中,容器中放的是一個object,object描述了倒計時的結(jié)束時間,以及顯示時間的jquery對象(例如div) timers:[], //全局的一個倒計時狀態(tài),init表示初始化狀態(tài),start表示運行中狀態(tài),stop表示停止?fàn)顟B(tài) status:'init', //計算時間并定時刷新時間的方法,本插件的核心代碼 takeCount:function(){ //如果定時器沒有啟動不執(zhí)行 if(this.status != 'start')return; setTimeout("$.oaoTime.takeCount()", 1000 ); var timers = this.timers; for (var i = 0, j = timers.length; i < j; i++) { //計數(shù)減一 timers[i].tms -= 1000; //console.info(timers[i].tms); //計算時分秒 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+"小時"+minutes+"分"+seconds+"秒"; timers[i].content.text(newTimeText); //console.info(newTimeText); } }, //啟動倒計時 start:function(){ if(this.status=='init'){ this.status = 'start'; this.takeCount(); } }, //停止倒計時 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倒計時插件實現(xiàn)團購秒殺效果,希望對大家有所幫助!
相關(guān)文章
jQuery不使用插件及swf實現(xiàn)無刷新文件上傳
這篇文章主要介紹了jQuery不使用插件及swf實現(xiàn)無刷新文件上傳,需要的朋友可以參考下2014-12-12jQuery結(jié)合jQuery.cookie.js插件實現(xiàn)換膚功能示例
這篇文章主要介紹了jQuery結(jié)合jQuery.cookie.js插件實現(xiàn)換膚功能,結(jié)合實例形式分析了jQuery.cookie.js插件的常用函數(shù)功能及實現(xiàn)換膚功能的相關(guān)操作技巧,需要的朋友可以參考下2017-10-10jQuery學(xué)習(xí)筆記之Helloworld
剛學(xué)習(xí)jQuery,覺得有的東西確實有必要寫下來,加深下記憶,本文純屬給自己寫的,希望大家不要見笑。2010-12-12jquery text(),val(),html()方法區(qū)別總結(jié)
jquery text(),val(),html()方法區(qū)別總結(jié)。需要的朋友可以過來參考下,希望對大家有所幫助2013-11-11基于HTML+CSS,jQuery編寫的簡易計算器后續(xù)(添加了鍵盤監(jiān)聽)
這篇文章主要介紹了使用HTML+CSS,jQuery編寫的簡易計算器后續(xù)(添加了鍵盤監(jiān)聽) 的相關(guān)資料,需要的朋友可以參考下2016-01-01關(guān)于jquery動態(tài)增減控件的一些想法和小插件
這段代碼壓縮到100行內(nèi),而且擴展方便,可以非常輕松的增減控件的數(shù)量,使用非常簡單。2010-08-08