倒计时插件

很简洁的一个倒计时插件  代码更简洁。

调用:

$("#test").Timedown(
                {
                    format: "<span>day天</span><span>hours时</span><span>minutes分<span/><span>seconds秒<span/>",
                    startTime: "2012/12/6 6:00:00",
                    endTime: "2012/12/6 6:00:10",
                    endTimeHtml: "倒计时结束了",//倒计时结束后显示结果  例如:小喇叭广播开始啦!
                    timerEndBlackFun: function () { alert("小喇叭广播开始啦"); }
                });

源码:

; (function ($) {
    $.fn.Timedown = function (userOption) {
        var option = {
            format: "<span>day天</span><span>hours时</span><span>minutes分<span/><span>seconds秒<span/>",//自定义显示时间结构 注意可以加样式哦  注意:day hours等等是占位符
            startTime: "",//开始时间"2012/12/6 6:00:00",
            endTime: "",//结束时间"2012/12/6 6:00:00",
            seconds: "",//秒数  当这里有值的时候 忽略startTime  endTime
            endTimeHtml: "",//倒计时结束后显示结果  例如:小喇叭广播开始啦!
            timerEndBlackFun: function () { }//回调函数
        }
        var options = $.extend({}, option, userOption || {});

        var nMS = new Date(options.endTime) - new Date(options.startTime);
        if (options.seconds > 0) {
            nMS = options.seconds * 1000;
        } else if (nMS > 0) {

        } else {
            options.timerEndBlackFun();
            return;
        }

        var $this = $(this); 
        var times = function () {
            nMS -= 1000;
            if (nMS <= 0) {
                clearInterval(_timeout);
                $this.html(options.endTimeHtml);
                options.timerEndBlackFun.call(this);
                return false;
            }
            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;

            var timesHtml = options.format;
            timesHtml = timesHtml.replace("day", nD);
            timesHtml = timesHtml.replace("hours", nH);
            timesHtml = timesHtml.replace("minutes", nM);
            timesHtml = timesHtml.replace("seconds", nS);

            $this.html(timesHtml);
        }
        var _timeout = setInterval(times, 1000);
    }
})(jQuery);

 

posted @ 2013-08-13 09:40  拉拉叟  阅读(241)  评论(0编辑  收藏  举报