倒计时插件

作者: 王远清orz | 来源:发表于2019-07-02 10:41 被阅读0次
    <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();
    

    相关文章

      网友评论

        本文标题:倒计时插件

        本文链接:https://www.haomeiwen.com/subject/ntzacctx.html