工作生活

倒计时插件

2019-07-02  本文已影响0人  王远清orz
<span class="count-down">
    <span class="day">0</span> 天 
    <span class="hour">0</span> 时 
    <span class="minute">0</span> 分 
    <span class="sec">0</span> 秒
</span>
(function ($) {
            $.fn.extend({
                countDown: function (options) {
                    var defaults = {
                        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 =  Math.round(new Date().getTime() / 1000).toString();//js返回的时间戳是13位,转换成10位
                                endDate = '{$data["expiration"]}';//后台给的时间戳数值,PHP返回的时间戳值是10位
                                tms = endDate - nowDate,    //时间差
                                days = Math.floor(tms / 60 / 60 / 24),
                                hours = Math.floor(tms / 60 / 60 % 24),
                                minutes = Math.floor(tms / 60 % 60),
                                secs = Math.floor(tms % 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(); //默认调用方法
        })(jQuery)

最主要记住,JS获取时间戳new Date().getTime()方法返回的是13位数,Java13位,PHP是10位,需要转换

附上js获取时间戳方法

var ts = Date.parse(new Date());
// ts 得到永远 xxx000  1493269366000  毫秒部分以000表示

//得到具体的毫秒:
var ts = (new Date()).valueOf(); //1280977330748
    ts = new Date().getTime();   // 同上

// 得到10位数
    ts = Math.round(new Date().getTime()/1000).toString();
上一篇下一篇

猜你喜欢

热点阅读