基于jQuery倒計時插件實現(xiàn)團購秒殺效果

更新時間：2016年05月13日 09:33:02 作者：漫步楓

倒計時在WEB上應用非常廣泛,如考試系統(tǒng)倒計時,團購網(wǎng)站中的優(yōu)惠活動倒計時等等。今天,我們來使用jQuery倒計時超級實現(xiàn)團購秒殺效果，感興趣的朋友一起學習吧

倒計時一般是用來表示未來某一時刻距現(xiàn)在時刻還剩多少時間。倒計時在WEB上應用非常廣泛,如考試系統(tǒng)倒計時,團購網(wǎng)站中的優(yōu)惠活動倒計時等等。今天,我們來使用jQuery倒計時超級實現(xiàn)團購秒殺效果，感興趣的朋友一起學習吧！

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表示停止狀態(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>無標題文檔</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)團購秒殺效果，希望對大家有所幫助！

您可能感興趣的文章: