1.1 幫助文檔關鍵字
倒計時 秒殺 timer
1.2. 使用場景
這樣的倒計時在購物網站中會經常使用到，比如秒殺，限時搶購，確認收貨倒計時。
這個功能並不難實現，就是利用js的定時執行，搜了一下網上的代碼，五花八門，都是一個方法，沒有做到封裝，方便使用，所以寫了一個插件，方便項目中使用。
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();
})
這樣就可以使用了，很簡單，這樣便於項目開發中統一使用，統一修改。
1.5. 上代碼
//倒計時的插件 $.fn.extend({ oaoTime:function(){ this.each(function() { var dateStr = $(this).attr("end-date"); var endDate = new Date(dateStr.replace(/-/g,"/"));//取得指定時間的總毫秒數 //now是在動態頁面中取得服務器的時間，如果沒有定義使用客戶端時間 try{ if(now==undefined); }catch(e){ 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描述了倒計時的結束時間，以及顯示時間的jquery對象(例如div) timers:[], //全局的一個倒計時狀態，init表示初始化狀態，start表示運行中狀態，stop表示停止狀態 status:'init', //計算時間並定時刷新時間的方法，本插件的核心代碼 takeCount:function(){ //如果定時器沒有啟動不執行 if(this.status != 'start')return; setTimeout("$.oaoTime.takeCount()", 1000 ); var timers = this.timers; for (var i = 0, j = timers.length; i < j; i++) { //計數減一 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'; }, //清空倒計時 clear:function(){ this.timers.forEach(function(row){ row.content.text(""); }) this.timers = []; } };
<!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=utf-8" /> <title>無標題文檔</title> <script src="https://cdn.bootcss.com/jquery/1.12.3/jquery.js"></script> <script type="text/javascript" src="oao.timer.js"></script> </head> <body> <ul> <div id="stop">停止</div> <div id="update">更新</div> <div id="timer1" end-date="2017-9-28"></div> <div id="timer2" end-date="2017/10/1 12:5:2"></div> </ul> </body> </html> <script> $(function(){ $("#stop").click(function() { $.oaoTime.stop(); }); $("#update").click(function() { $.oaoTime.clear(); $("#timer1").attr("end-date","2017-10-4"); $("#timer1").oaoTime(); }); $("#timer1").oaoTime(); }) </script>
寫的比較倉促，希望大家指出不好的地方，有更好的方案希望能夠拿出來分享，覺得可取，拿去使用。