jQuery 插件开发——countdown（倒计时）

　　故事背景：按照惯例，先写下故事背景，其实也是再次汇报下最近开发情况的。做电商的都知道，这是个活动季啊，双十一、双十二、元旦。。。。各种啊。。其实说这么多就是想表达最近比较忙。呵呵^_^，正好今天抽点空来我最爱的网站写点自己喜欢的和大家分享下。

　　还是之前按之前所说，插件源于开发需求。正好最近项目中需要用到计时器和预加载图片功能，本人心血来潮，决定整个插件封装一下，即满足了项目的需要，也满足自己的爱好啊，算是一举两得吧^^。其实写插件的时候要考虑到很多，因为公共的东西，如果出错，那后果会影响很大。毕竟不是一个地方用。所以，开发插件的时候一定要考虑全面。经过N次自测和他测，然后再使用。也就是我之前所说的，好的插件源于测试。经不起测试的插件，那就是个大坑啊。相信不少程序猿同仁被坑过啊。说多了都是泪啊。。。。所以现在的我是能不用第三方的坚决不用，就算麻烦也要自己去写。。。

　　额。。好像又扯多了，这里就是程序猿网上的家啊，到了家里就是能说，一不小心就说多了。。。好了，开始本次插件系列开发的正题吧。

　　故事经过：本次开发的插件是countdown（倒计时），这个是个小插件，可能都是大家看不起眼的插件。呵呵，也许吧。功能的确简单。但是可扩展性可是很强的啊，例如，如果一个页面上有多个这样的倒计时，（例如淘宝页面的商品倒计时）难不成要写多次？当然不是这样。大部分的倒计时都是用window.setInterval实现的。使用window.setInterval就会涉及到关闭计时器的动作。这个动作也是很多人常常会漏掉的，希望大家养成良好习惯，及时关闭计时器。否则会给页面带来很大开销。更何况如果一个页面有很多个这样的计时器，例如淘宝的限时促销活动。一个页面可能有几十个倒计时器，如果在结束时候不关闭，那么这样的影响就很大了。所以，猿们，我们得养成好习惯啊。得像狮学习啊。^_^

　　其实当一个页面有未知个数的倒计时的时候，那么我们就要专门去控制关闭了，而不是那么简单的clearInterval("...");了。所以，一个看似简单的倒计时，只要你肯挖掘里面的需求，其实也不是那么简单。当然喽，也不是很复杂了。

　　先说下本倒计时的功能吧。1、支持同一个页面多个倒计时；2、倒计时结束后，能自动释放计时器；

　　看过我之前写的插件开发系列的都知道我写插件的规范，或者说是习惯吧。老样子，开发插件分三步走：

　　第一步：定义插件和参数　　var countdown= function () {this.defaultParams = {};};

　　第二步：定义插件属性、方法　　  countdown.prototype = {constructor: countdown,init:function (params){}};

　　第三步：对外分装　　$.countdown= new countdown();

　　这里在啰嗦两句，为啥老是这样写呢，首先，做任何事情都要按“步骤”来，这里不是说要按部就班啥的，是一种自己看好的习惯，也算是我个人理解的一个规范吧。第二，这样写思路很清晰，目的也很明确，剩下的只需要你去填充就行了。当然了，每个插件的内部实现都是不一样的，难易不一，这个只能算个框架，或是说思路吧。

　　这篇博文写了很久，主要是忙了一段时间忘记了，今天又拿出来，补上吧。算是给自己一点安慰吧，一般我不喜欢拖着一件事情的，尤其是自己喜欢的事情。^_^

　　好了，该是贴代码的时刻了，哈哈　　

 1 /*
 2  *  instructions ：countdown  
 3  *  date : 2014-10-26
 4  *  author : 张文书
 5  *  Last Modified 2014-10-17
 6  *  By 张文书
 7  */ 
10 $(function () { 
12     ///说明:
13     ///     倒计时
14     var countdown = function () {
15         this.defaults = {
16             endDateTime: "",//结束时间  格式"yyyy-MM-dd HH:mm:ss"
17             currentDateTime: "",//服务器当前时间 格式"yyyy-MM-dd HH:mm:ss"
18 
19             remainDaysId: "",//剩余天 ID
20             remainHoursId: "",//剩余小时 ID
21             remainMinutesId: "",//剩余分钟 ID
22             remainSecondsId: "", //剩余秒钟 ID
23             countDownName: "",  //倒计时器名称
24             difference: 0    //时间间隔（无需赋值，只做接收）
25         };
26         this.options = {}; 
28     }; 
30     countdown.prototype = { 
32         constructor: countdown, 
34         init: function (params) {
35             this.options = $.coverObject(this.defaults, params);
36             this._initCountdown(); 
38         }, 
40         _initCountdown: function () { 
42             this.options.difference = this.getDifference();
43             var options = this.options;
44             this.options.countDownName = window.setInterval(function () {
45                 countdown.prototype.getCountdownTime(options);
46             }, 1000); 
48         }, 
50         //说明：
51         //      返回结束时间和当前服务器时间的差值
52         getDifference: function () { 
54             var endDateTime = this.convertStrToDate(this.options.endDateTime);//设置结束时间
55             var endTime = endDateTime.getTime();//定义参数可返回距 1970 年 1 月 1 日之间的毫秒数   
57             var nowTime = this.convertStrToDate(this.options.currentDateTime);//当前时间
59             var difference = endTime - nowTime.getTime();//差值
60             return difference;
61         },
63         //说明：
64         //      获得并显示倒计时时间
65         getCountdownTime: function (options) { 
67             options.difference = options.difference - 1000; 
69             var nMS = options.difference;
70             var nD = Math.floor(nMS / (1000 * 60 * 60 * 24));//获得天数
71             var nH = Math.floor(nMS / (1000 * 60 * 60)) % 24;//获得小时
72             var nM = Math.floor(nMS / (1000 * 60)) % 60;//获得分钟
73             var nS = Math.floor(nMS / 1000) % 60;//获得秒钟
74             if (nMS < 0) {
75                 clearInterval(options.countDownName);//停止
76             } else {
77                 $("#" + options.remainDaysId).text(nD < 10 ? "0" + nD : nD);//显示天数  
78                 $("#" + options.remainHoursId).text(nH < 10 ? "0" + nH : nH);//显示小时  
79                 $("#" + options.remainMinutesId).text(nM < 10 ? "0" + nM : nM);//显示分钟  
80                 $("#" + options.remainSecondsId).text(nS < 10 ? "0" + nS : nS);//显示秒钟  
81             }
82         },
84         //说明：
85         //      将字符串转成时间类型
86         convertStrToDate: function (strDate) {
87             var date = eval('new Date(' + strDate.replace(/\d+(?=-[^-]+$)/, function (a) { return parseInt(a, 10) - 1; }).match(/\d+/g) + ')');
88             return date;
89         }
90     };
92     $.countdown = new countdown();
94 });

　　代码很简单，而且都有我开发的时候写的注释（我个人有写注释的习惯，当然这些注释不光是写个我自己看的。我认为，写好注释也是一种团队意识的表现。记住：你写的代码最终不仅仅是为了给自己看。为啥我就不解释了，都懂^_^），代码我就不一一解释了，注意传递的参数，要传很多标签id。当然如果你有兴趣，可以将其封装在插件里，通过jquery输出到页面，这个也很简单。这里只是提供个意见。

　　因为本来就是一个简单的功能，所以也就没有样式表了。如果有不清楚的园友，请随时联系我。当然，如果您有更好的意见，还请不吝赐教啊，如果有想共同探讨插件开发（或者其他）的同仁，随时联系我，QQ:296319075 ，注明园友就好，同时也希望大家也能提出宝贵意见。秉承共同探讨、共同进步！如有转载，请注明出处，谢谢！^_^

 

转载于:https://www.cnblogs.com/mzws/p/countdown.html