jquery插件之倒計時-團購秒殺

時間 2019-11-19

標籤 jquery 插件倒計時團購秒殺欄目 JQuery 简体版

原文原文鏈接

1.1 幫助文檔關鍵字javascript

　　　　倒計時秒殺 timercss

1.2. 使用場景html

　　　　這樣的倒計時在購物網站中會常常使用到，好比秒殺，限時搶購，確認收貨倒計時。java

　　　　這個功能並不難實現，就是利用js的定時執行，搜了一下網上的代碼，五花八門，都是一個方法，沒有作到封裝，方便使用，因此寫了一個插件，方便項目中使用。jquery

1.4. 使用說明服務器

　　　　開始使用網站

　　　　一、引入oao.timer.jsui

　　　　二、要顯示倒計時時間的divthis

　　　　　　<div id="timer1" end-date="2016-1-1"></div>spa

　　　　　　<div id="timer2" end-date="2015/10/1 12:5:2"></div>Code:

　　　　三、初始化倒計時

　　　　　　$(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>