The jquery countdown plugin is written

    recently encountered in a number of projects have a countdown function, that is, the current time away from a point of time remaining time, because each time to copy large sections of code, so in order to reduce their next development workload, the countdown to the function of the packaging, Describe the process of plug-in development here.     jquery Plug-ins common development methods are three, the first extend, the second through the $.fn Add method, the third is the development of the object, this way is common in jqueryui, such as Easyui,ligerui and so on. A third is used here, mimicking the implementation of Easyui. It took 2, 3 nights to finally implement an executable version of the     plugin development Default schema is the following code,

(function ($) {$.fn.counttime = function (options, params) {return This.each (function () {var opts
            = $.extend ({}, $.fn.counttime.defaults, options);
                if (opts.endstring) {var dstring = Opts.getCountString.call (this, opts.endstring);
            $ (this). html (dstring);
                else {Opts.start = Timeexchange (options.starttime);
                Opts.end = Timeexchange (options.endtime);
                $.data (This, "Counttime", opts);
                JQ = this;
            ShowTime ();

    }

        });
    };

    var jq;
        var showTime = function () {var opts = $.data (JQ, "counttime");
        Opts.start = Opts.start + 1000;
        var distance = Opts.end-opts.start;
        if (Distance < 0) {$ (JQ). HTML ("");
            else {var countdownloadstring = Opts.getCountString.call (this, getcountdownstring (distance)); $ (JQ). HTML (countdownloadstring);
        } $.data (JQ, "Counttime", opts);
    Timeid = settimeout (showTime, 1000); }//Method $.fn.counttime.methods = {options:function (JQ) {return $.data (jq[0], "Mxtabs"). opt
        ions;

    },
    };
        Default value $.fn.counttime.defaults = {starttime: "", Endtime: "", start:0, end:0,
        Getcountstring:function (downstring) {return downstring;

    },
    };
        /** * Get String */function getcountdownstring (distance) {if (distance < 0) return "0 days 00:00:00";
        var day = Math.floor (Distance/(3600000 * 24));
        Distance = Day * 3600000 * 24;
        var hour = Math.floor (distance/3600000);
        Distance-= hour * 3600000;
        var minute = Math.floor (distance/60000);
        Distance-= minute * 60000;
        var second = Math.floor (distance/1000);
        if (day >= 1) = days + "Sky";
        Else day = ""; if (hour;
        hour = "0" + hour;
        if (minute <) minute = "0" + minute;
        if (second <) Second = "0" + second;
    Return day + hour + ":" + Minute + ":" + second;
        /** * Parse Time String */function Timeexchange (datastr) {var date = new Date ();
        var perfex = Datastr.split ("") [0];
        var surfex = Datastr.split ("") [1];
            if (Perfex) {var prefexs = Perfex.split ("-");
            var y = 0;
            if (prefexs.length >= 1) {y = prefexs[0]/1;
            } var m = 0;
            if (prefexs.length >= 2) {//Because the month is starting from 0, so minus one M = prefexs[1]/1-1;
            } var d = 0;
            if (prefexs.length >= 3) {d = prefexs[2]/1;
        } date.setfullyear (Y, M, d);
            } if (Surfex) {var surfexs = Surfex.split (":");
            var h = 0; if (surfexs.length >= 1) {h = surfexs[0]/1;
            } var m = 0;
            if (surfexs.length >= 2) {//Because the month is starting from 0, so minus one M = surfexs[1]/1-1;
            } var s = 0;
            if (surfexs.length >= 3) {s = surfexs[2]/1;
        } date.sethours (H, M, s, 0);
    return Date.gettime (); }) (JQuery);

The initial idea is to use settimeout, the code as follows, and then found the scope of the settimeout problem, using a string can not invoke the internal methods of Plug-ins, and then use the method, then found that the loop, in order to solve this problem to find several jquery Countdown plug-ins, of which Jquery.redcountdown.js     Fliptimer.js is implemented using SetInterval, and in this process it is understood that JavaScript is confusing, that JavaScript can never be confused without the support of browser vendors, and that written code is not protected enough. The final rewrite code is as follows:

(function ($) {$.fn.counttime = function (options, params) {return This.each (function () {var opts
            = $.extend ({}, $.fn.counttime.defaults, options);
                if (opts.endstring) {var dstring = Opts.getCountString.call (this, opts.endstring);
            $ (this). html (dstring);
                else {Opts.start = Timeexchange (options.starttime);
                Opts.end = Timeexchange (options.endtime);
                Opts.interid = SetInterval (showTime, 1000);
                $.data (This, "Counttime", opts);
                JQ = this;
            ShowTime ();

    }

        });
    };

    var jq;
        var showTime = function () {var opts = $.data (JQ, "counttime");
        Opts.start = Opts.start + 1000;
        var distance = Opts.end-opts.start;
            if (Distance < 0) {$ (JQ). HTML ("");
            if (Opts.interid) {clearinterval (Opts.interid); }
        else {var countdownloadstring = Opts.getCountString.call (this, getcountdownstring (distance));
        $ (JQ). HTML (countdownloadstring);
        } $.data (JQ, "Counttime", opts);
    Timeid=settimeout (showtime,1000); }//Method $.fn.counttime.methods = {options:function (JQ) {return $.data (jq[0], "Mxtabs"). opt
        ions;

    },
    };
        Default value $.fn.counttime.defaults = {starttime: "", Endtime: "", start:0, end:0,
        Getcountstring:function (downstring) {return downstring;

    },
    };
        /** * Get String */function getcountdownstring (distance) {if (distance < 0) return "0 days 00:00:00";
        var day = Math.floor (Distance/(3600000 * 24));
        Distance = Day * 3600000 * 24;
        var hour = Math.floor (distance/3600000);
        Distance-= hour * 3600000;
        var minute = Math.floor (distance/60000); Distance = mInute * 60000;
        var second = Math.floor (distance/1000);
        if (day >= 1) = days + "Sky";
        Else day = "";
        if (hour <) hour = "0" + hour;
        if (minute <) minute = "0" + minute;
        if (second <) Second = "0" + second;
    Return day + hour + ":" + Minute + ":" + second;
        /** * Parse Time String */function Timeexchange (datastr) {var date = new Date ();
        var perfex = Datastr.split ("") [0];
        var surfex = Datastr.split ("") [1];
            if (Perfex) {var prefexs = Perfex.split ("-");
            var y = 0;
            if (prefexs.length >= 1) {y = prefexs[0]/1;
            } var m = 0;
            if (prefexs.length >= 2) {//Because the month is starting from 0, so minus one M = prefexs[1]/1-1;
            } var d = 0;
            if (prefexs.length >= 3) {d = prefexs[2]/1; } Date.setfullyeaR (Y, M, d);
            } if (Surfex) {var surfexs = Surfex.split (":");
            var h = 0;
            if (surfexs.length >= 1) {h = surfexs[0]/1;
            } var m = 0;
            if (surfexs.length >= 2) {//Because the month is starting from 0, so minus one M = surfexs[1]/1-1;
            } var s = 0;
            if (surfexs.length >= 3) {s = surfexs[2]/1;
        } date.sethours (H, M, s, 0);
    return Date.gettime (); }) (JQuery);

The implementation of the call is as follows

$ ("#countTime"). Counttime ({
    starttime: ' 2015-10-2 11:20:00 ',
    endtime: ' 2015-10-2 11:20:10 '
});

In this process, we recognize some of the jquery plug-ins, the definition of variables, the invocation of internal methods, how the internal methods are invoked externally, and the idea of Caching $.data (), which were previously stored in the DOM and then read, and $.extend () for data extensions.