故事背景：按照惯例，先写下故事背景，其实也是再次汇报下最近开发情况的。做电商的都知道，这是个活动季啊，双十一、双十二、元旦。。。。各种啊。。其实说这么多就是想表达最近比较忙。呵呵^_^，正好今天抽点空来我最爱的网站写点自己喜欢的和大家分享下。
还是之前按之前所说，插件源于开发需求。正好最近项目中需要用到计时器和预加载图片功能，本人心血来潮，决定整个插件封装一下，即满足了项目的需要，也满足自己的爱好啊，算是一举两得吧^^。其实写插件的时候要考虑到很多，因为公共的东西，如果出错，那后果会影响很大。毕竟不是一个地方用。所以，开发插件的时候一定要考虑全面。经过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 ，注明园友就好，同时也希望大家也能提出宝贵意见。秉承共同探讨、共同进步！如有转载，请注明出处，谢谢！^_^