倒计时插件

作者: 王远清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();

相关文章

  • 前端页面实现倒计时效果的几种方法

    1.15分钟倒计时 2.距离未来时间倒计时 3.数码时钟 4.时间插件倒计时:https://www.jq22.c...

  • 倒计时插件

  • 倒计时插件

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

  • 倒计时-vue

    HTML: script: Vue学习笔记-倒计时插件 https://www.jianshu.com/p/3fd...

  • JavaScript短信验证码60秒倒计时插件

    该插件依赖于jquery,用于发送短信验证码后的60秒倒计时: 下载完整代码: 下载 下载后的完整实例包括: 插件...

  • 日期倒计时插件使用方法

    一、日期倒计时简介 日期倒计时插件是一款日期倒计时工具,可用于添加桌面小窗口,对一些重要事件(如朋友生日、结婚纪念...

  • 商品促销倒计时效果实现

    效果图展示 所有的知识点总结如下: 轮播图实现:swiper插件 倒计时功能的实现 倒计时结束,抢购按钮变为可点击...

  • 时间选择插件、倒计时插件

    1.DateTimePicker 时间选择插件 我们在使用这个插件时,前端页面获取的时间是String类型,在数...

  • JS实现日历

    最近在捣鼓一个chrome插件,包括两个功能:1.倒计时,2.日历。 大致是下面这个样子: 倒计时模式倒还简单,日...

  • SMCountDown 倒计时插件

    来源:http://itssh.cn/post/9.html SMCountDown github地址:https...

网友评论

    本文标题:倒计时插件

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