[jQuery]基于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();

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

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

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

/* 
 *  instructions ：countdown   
 *  date : 2014-10-26 
 *  author : 张文书 
 *  Last Modified 2014-10-17 
 *  By 张文书 
 */ 
 
 
$(function () { 
 
    ///说明: 
    ///     倒计时 
    var countdown = function () { 
        this.defaults = { 
            endDateTime: "",//结束时间  格式"yyyy-MM-dd HH:mm:ss" 
            currentDateTime: "",//服务器当前时间 格式"yyyy-MM-dd HH:mm:ss" 
 
            remainDaysId: "",//剩余天 ID 
            remainHoursId: "",//剩余小时 ID 
            remainMinutesId: "",//剩余分钟 ID 
            remainSecondsId: "", //剩余秒钟 ID 
            countDownName: "",  //倒计时器名称 
            difference: 0    //时间间隔（无需赋值，只做接收） 
        }; 
        this.options = {}; 
 
    }; 
 
    countdown.prototype = { 
 
        constructor: countdown, 
 
        init: function (params) { 
            this.options = $.coverObject(this.defaults, params); 
            this._initCountdown(); 
 
        }, 
 
        _initCountdown: function () { 
 
            thisthis.options.difference = this.getDifference(); 
            var options = this.options; 
            this.options.countDownName = window.setInterval(function () { 
                countdown.prototype.getCountdownTime(options); 
            }, 1000); 
 
        }, 
 
        //说明： 
        //      返回结束时间和当前服务器时间的差值 
        getDifference: function () { 
 
            var endDateTime = this.convertStrToDate(this.options.endDateTime);//设置结束时间 
            var endTime = endDateTime.getTime();//定义参数可返回距 1970 年 1 月 1 日之间的毫秒数   
 
            var nowTime = this.convertStrToDate(this.options.currentDateTime);//当前时间 
 
            var difference = endTime - nowTime.getTime();//差值 
            return difference; 
        }, 
 
        //说明： 
        //      获得并显示倒计时时间 
        getCountdownTime: function (options) { 
 
            optionsoptions.difference = options.difference - 1000; 
 
            var nMS = options.difference; 
            var nD = Math.floor(nMS / (1000 * 60 * 60 * 24));//获得天数 
            var nH = Math.floor(nMS / (1000 * 60 * 60)) % 24;//获得小时 
            var nM = Math.floor(nMS / (1000 * 60)) % 60;//获得分钟 
            var nS = Math.floor(nMS / 1000) % 60;//获得秒钟 
            if (nMS < 0) { 
                clearInterval(options.countDownName);//停止 
            } else { 
                $("#" + options.remainDaysId).text(nD < 10 ? "0" + nD : nD);//显示天数   
                $("#" + options.remainHoursId).text(nH < 10 ? "0" + nH : nH);//显示小时   
                $("#" + options.remainMinutesId).text(nM < 10 ? "0" + nM : nM);//显示分钟   
                $("#" + options.remainSecondsId).text(nS < 10 ? "0" + nS : nS);//显示秒钟   
            } 
        }, 
 
        //说明： 
        //      将字符串转成时间类型 
        convertStrToDate: function (strDate) { 
            var date = eval('new Date(' + strDate.replace(/\d+(?=-[^-]+$)/, function (a) { return parseInt(a, 10) - 1; }).match(/\d+/g) + ')'); 
            return date; 
        } 
    }; 
 
    $.countdown = new countdown(); 
 
});