第一次寫jquery插件，來個countdown計時器吧

之前同學做個購物商城秒殺活動需要計時器的功能，在用jquery提供的countdown插件時，一直報錯，貌似還需要依賴除jquery之外的其他插件，搞了半天也沒搞成功，就叫我幫忙寫個。然而我並沒有寫過插件，不過剛好趁這次端午好好地鍛煉一把吧，順便在這兒存個代碼，自己的思路不好，大神們請不要見笑哈.. ...

之前同學做個購物商城秒殺活動需要計時器的功能，在用jquery提供的countdown插件時，一直報錯，貌似還需要依賴除jquery之外的其他插件，搞了半天也沒搞成功，就叫我幫忙寫個。然而我並沒有寫過插件，不過剛好趁這次端午好好地鍛煉一把吧，順便在這兒存個代碼，自己的思路不好，大神們請不要見笑哈...

廢話不多說，直接上代碼：

=======================================請叫我華麗的分割線=======================================

先展示一下插件調用方式：

1.需要先載入countdown插件對應的css文件，也就幾行代碼而已，可以不用引入，自己手寫一樣啦

 <head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <title>jquery countdown倒計時插件</title>
  <link rel="stylesheet" type="text/css" href="css/jquery.countdown-1.0.0.css"/>
 </head>

css代碼內容:

* {
 margin: 0;
 padding: 0;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 -ms-box-sizing: border-box;
 -o-box-sizing: border-box;
 box-sizing: border-box;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

html,
body {
 font: 24px/1.5 'Microsoft YaHei', arial, tahoma, '\5b8b\4f53', sans-serif;
 font-weight: 700;
 background: #efefef;
 -webkit-text-size-adjust: 100%;
 text-size-adjust: 100%;
}

#countdown {
 width: 60%;
 margin: 20% auto;
 color: #ff4d4d;
}

.countdown-day,
.countdown-hour,
.countdown-minute,
.countdown-second {
 display: inline-block;
 margin: 0 .5rem;
 background: #ff3f0f;
 font-size: 2rem;
 font-weight: 700;
 color: #fff;
}

2.再載入js文件，在此之前得先引入jquery

  <script type="text/javascript" src="js/jquery-2.2.4.min.js"></script>
  <script type="text/javascript" src="js/jquery.countdown-1.0.0.min.js"></script>

3.然後定義一個顯示時間的元素，初始化配置後就可以看到計時啦

<body>
  <div id="countdown"></div>

  <script type="text/javascript" src="js/jquery-2.2.4.min.js"></script>
  <script type="text/javascript" src="js/jquery.countdown-1.0.0.min.js"></script>
  <script>
   $('#countdown').countdown({
    //活動開始時間 (可採用時間戳 或者 標準日期時間格式 "yyyy/MM/dd HH:mm:ss")
    //優先採取元素的data-stime值(該值只能為時間戳格式)
    startTime: '2016/6/11 17:54:00',//活動結束時間 (可採用時間戳 或者 標準日期時間格式 "yyyy/MM/dd HH:mm:ss")
    //優先採取元素的data-etime值(該值只能為時間戳格式)         
    endTime: '2016/6/11 17:55:00',
    //活動開始前倒計時的修飾
    //可自定義元素,例如"<span>距離活動開始倒計時還有:</span>"            
    beforeStart: '距離活動開始倒計時還有:',
    //活動進行中倒計時的修飾 
    //可自定義元素,例如"<span>距離活動截止還有:</span>"  
    beforeEnd: '距離活動截止還有:',
    //活動結束後的修飾
    //可自定義元素,例如"<span>活動已結束</span>"             
    afterEnd: '親，活動結束啦，請繼續關註哦!',
    //時間格式化(可採用"ddd:hh:mm:ss、 dd:hh:mm:ss、  hh:mm:ss、 mm:ss、 ss"等)                   
    format: 'dd:hh:mm:ss',
    //活動結束後的回調函數                    
    callback: function() {
     console.log('親，活動結束啦，請繼續關註哦!');
    }
   });
  </script>
 </body>

然後附上countdown插件的源代碼，大神們看了不要見笑哈...

  1 /**
  2  * 簡單的jquery購物商城秒殺倒計時插件
  3  * @date 2016-06-11
  4  * @author TangShiwei
  5  * @email [email protected]
  6  */
  7 ;(function(factory) {
  8     "use strict";
  9     // AMD RequireJS
 10     if (typeof define === "function" && define.amd) {
 11      define(["jquery"], factory);
 12     } else {
 13      factory(jQuery);
 14     }
 15    })(function($) {
 16     "use strict";
 17     $.fn.extend({
 18      countdown: function(options) {
 19       if (options && typeof(options) !== 'object') {
 20        return false;
 21       }
 22       //預設配置
 23       var defaults = {
 24        //活動開始時間 (可採用時間戳 或者 標準日期時間格式 "yyyy/MM/dd HH:mm:ss")
 25        //優先採取元素的data-stime值(該值只能為時間戳格式)
 26        startTime: '2016/6/11 21:00:00',
 27        //活動結束時間 (可採用時間戳 或者 標準日期時間格式 "yyyy/MM/dd HH:mm:ss")
 28        //優先採取元素的data-etime值(該值只能為時間戳格式)         
 29        endTime: '2016/6/11 24:00:00',
 30        //活動開始前倒計時的修飾
 31        //可自定義元素,例如"<span>距離活動開始倒計時還有:</span>"            
 32        beforeStart: '距離活動開始倒計時還有:',
 33        //活動進行中倒計時的修飾 
 34        //可自定義元素,例如"<span>距離活動截止還有:</span>"  
 35        beforeEnd: '距離活動截止還有:',
 36        //活動結束後的修飾
 37        //可自定義元素,例如"<span>活動已結束</span>"             
 38        afterEnd: '活動已結束',
 39        //時間格式化(可採用"ddd:hh:mm:ss、 dd:hh:mm:ss、  hh:mm:ss、 mm:ss、 ss"等)                   
 40        format: 'dd:hh:mm:ss',
 41        //活動結束後的回調函數                    
 42        callback: function() {                    
 43         return false;
 44        }
 45       };
 46       //根據時間格式渲染對應結構
 47       var strategies = {
 48        "4": function($this, timeArr, desc) {
 49         return $this.html(desc + '<span class="countdown-day">' + timeArr[0] + '</span>天' + 　'<span class="countdown-hour">' + timeArr[1] + '</span>時' + '<span class="countdown-minute">' + timeArr[2] + '</span>分' + '<span class="countdown-second">' + timeArr[3] + '</span>秒');
 50        },
 51        "3": function($this, timeArr, desc) {
 52         return $this.html(desc + '<span class="countdown-hour">' + timeArr[0] + '</span>時' + '<span class="countdown-minute">' + timeArr[1] + '</span>分' + '<span class="countdown-second">' + timeArr[2] + '</span>秒');
 53        },
 54        "2": function($this, timeArr, desc) {
 55         return $this.html(desc + '<span class="countdown-minute">' + timeArr[0] + '</span>分' + '<span class="countdown-second">' + timeArr[1] + '</span>秒');
 56        },
 57        "1": function($this, timeArr, desc) {
 58         return $this.html(desc + '<span class="countdown-second">' + timeArr[0] + '</span>秒');
 59        }
 60       };
 61       /**
 62        * [killTime 時間差換算併進行格式化操作]
 63        * @param  {[Object]} _this_ [jquery對象]
 64        * @param  {[Number]} sTime  [當前時間]
 65        * @param  {[Number]} eTime  [結束時間]
 66        * @param  {[String]} desc   [時間修飾]
 67        * @param  {[String]} format [時間格式]
 68        * @return {[Function]} strategies [根據格式渲染對應結構]
 69        */
 70       var killTime = function(_this_, sTime, eTime, desc, format) {
 71        var diffSec = (eTime - sTime) / 1000;
 72        var map = {
 73         h: Math.floor(diffSec / (60 * 60)) % 24,
 74         m: Math.floor(diffSec / 60) % 60,
 75         s: Math.floor(diffSec % 60)
 76        };
 77        var format = format.replace(/([dhms])+/g, function(match, subExp) {
 78         var subExpVal = map[subExp];
 79         if (subExpVal !== undefined) {
 80          if (match.length > 1) {
 81           subExpVal = '0' + subExpVal;
 82           subExpVal = subExpVal.substr(subExpVal.length - match.length);
 83           return subExpVal;
 84          }
 85         } else if (subExp === 'd') {
 86          if (match.length >= 1 && match.length < 4) {
 87           map[subExp] = Math.floor(diffSec / (60 * 60 * 24));
 88           var d = '00' + map[subExp];
 89           return d.substr(d.length - match.length);
 90          }
 91         }
 92         return match;
 93        });
 94        //將時間格式通過":"符號進行分組
 95        var timeArr = String.prototype.split.call(format, ':');
 96       /**
 97        * [render 通過分組情況渲染對應結構]
 98        * @param  {[Object]} _this_ [jquery對象]
 99        * @param  {[Number]} timeArrLen  [時間分組後的數組長度]
100        * @param  {[Array]} timeArr  [時間分組後的數組]
101        * @param  {[String]} desc   [時間修飾]
102        * @return {[Function]} strategies [根據數組長度渲染對應結構]
103        */
104        var render = function(_this_, timeArrLen, timeArr, desc) {
105         return strategies[timeArrLen](_this_, timeArr, desc);
106        };
107        render(_this_, timeArr.length, timeArr, desc);
108       }
109       //覆蓋預設配置
110       var opts = $.extend({}, defaults, options);
111       return this.each(function() {
112        var $this = $(this);
113        var _timer = null;
114        //優先採取元素的data-stime值(該值只能為時間戳格式)
115        var sTime = $this.data('stime') ? parseInt($this.data('stime'), 10) : (new Date(opts.startTime)).getTime();
116        //優先採取元素的data-etime值(該值只能為時間戳格式)
117        var eTime = $this.data('etime') ? parseInt($this.data('etime'), 10) : (new Date(opts.endTime)).getTime();
118        if (_timer) {
119         clearInterval(_timer);
120        }
121        _timer = setInterval(function() {
122         var nowTime = (new Date()).getTime();
123         if (nowTime < sTime) {
124          //活動暫未開始
125          killTime($this, nowTime, sTime, opts.beforeStart, opts.format);
126         } else if (nowTime >= sTime && nowTime <= eTime) {
127          //活動進行中
128          killTime($this, nowTime, eTime, opts.beforeEnd, opts.format);
129         } else {
130          //活動已結束
131          clearInterval(_timer);
132          $this.html(opts.afterEnd);
133          if (opts.callback && $.isFunction(opts.callback)) {
134           opts.callback.call($this);
135          }
136         }
137        }, 1000);
138       });
139      }
140     });
141    });

源代碼

然後再來幾個效果圖吧: