jQuery 倒计时插件

效果展示

在线预览

倒计时在线预览

结构

<div class="count-down" data-end="2097/11/10">
    <p>90年后倒计时p>
    <span class="day">0span> 天 <span class="hour">0span> 时 <span class="minute">0span> 分 <span class="sec">0span> 秒
div>
<div class="count-down a2" data-end="2018/02/16">
    <p>2018年春节倒计时p>
    <span class="day">0span> 天 <span class="hour">0span> 时 <span class="minute">0span> 分 <span class="sec">0span> 秒
div>

js

  /*
    * @author: jingwei.wang
    * @time: 2017-11-09 15:21
    * @last modify time: 2017-11-10 11:01
    */
    (function ($) {
        $.fn.extend({
            countDown: function (options) {
                var defaults = {
                        endTime: '2097/11/10',  //结束时间,90年后
                        day: '.day',
                        hour: '.hour',
                        minute: '.minute',
                        sec: '.sec'
                    },
                    opts = $.extend({}, defaults, options); //对象扩展到opts
                this.each(function () {     //遍历
                    var $this = $(this);
                    times();    //先执行一次，防止刷新时数字都显示为0
                    var timer = setInterval(times, 1000);   //定时器执行

                    function times() {
                        var nowDate = new Date(),
                            endDate = $this.data('end') ? new Date($this.data('end')) : new Date(opts.endTime),// 定义了两种方式，data-end和defaults.endTime,优先data-end
                            tms = endDate - nowDate,    //时间差
                            days = Math.floor(tms / 1000 / 60 / 60 / 24),
                            hours = Math.floor(tms / 1000 / 60 / 60 % 24),
                            minutes = Math.floor(tms / 1000 / 60 % 60),
                            secs = Math.floor(tms / 1000 % 60);
                        if (tms > 0) {  //如果时间差大于0，显示倒计时
                            $this.find(opts.day).text(addZero(days));
                            $this.find(opts.hour).text(addZero(hours));
                            $this.find(opts.minute).text(addZero(minutes));
                            $this.find(opts.sec).text(addZero(secs));
                        } else {    //否则清除定时器，倒计时结束
                            clearInterval(timer);
                        }
                    }
                });


                function addZero(t) {  //一位数加0
                    if (t < 10) {
                        return t = '0' + t;
                    } else {
                        return t;
                    }
                }
                return this; //返回this方便链式调用
            }
        });
        $('.count-down').countDown(); //默认调用方法
        $('.a2').countDown();
    })(jQuery)