精确到毫秒级～倒计时方法

最新推荐文章于 2021-06-23 10:06:05 发布

Lemon Yang

最新推荐文章于 2021-06-23 10:06:05 发布

阅读量3.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/qq_1056498056/article/details/99672733

JavaScript 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用JavaScript和jQuery实现的倒计时功能，能够将秒数转换为时、分、秒格式，并提供了组件化的操作方式，便于在网页中灵活应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


/** 秒转换时分秒 **/ 
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    $(function () {
        Count_down($("#downTime"),getSpeicalTime());
    });
    function Count_down(el,d) {
        var newD = d;
        el.each(function(){
            var $this = $(this);
            var o = {
                hm: $this.find(".hm"),
                sec: $this.find(".sec"),
                mini: $this.find(".mini"),
                hour: $this.find(".hour"),
                day: $this.find(".day"),
                month:$this.find(".month"),
                year: $this.find(".year"),
            };
            var f = {
                haomiao: function(n){
                    if(n < 10)return "00" + n.toString();
                    if(n < 100)return "0" + n.toString();
                    return n.toString();
                },
                zero: function(n){
                    var _n = parseInt(n, 10);//解析字符串,返回整数
                    if(_n > 0){
                        if(_n <= 9){
                            _n = "0" + _n
                        }
                        return String(_n);
                    }else{
                        return "00";
                    }
                },
                dv: function(){
                    //d = d || Date.UTC(2050, 0, 1); //如果未定义时间，则我们设定倒计时日期是2050年1月1日
                    var _d = newD;
                    var endDate = new Date(_d).getTime();
                    var now = new Date().getTime();
                    //现在将来秒差值
                    if(endDate <= now){
                        window.localStorage.setItem('morning',JSON.stringify(getSpeicalTime()));
                        endDate = getSpeicalTime().getTime();
                        newD = getSpeicalTime();
                    }else{
                        window.localStorage.setItem('morning',JSON.stringify(endDate));
                    }
                    return f.tm(endDate,now);
                },
                tm: function(endDate,now){
                    var
                        dur = (endDate - now) / 1000 ,
                        mss = endDate - now,
                        pms = {
                            hm:"000",
                            sec: "00",
                            mini: "00",
                            hour: "00",
                            day: "00",
                            month: "00",
                            year: "0"
                        };
                    if(mss > 0){
                        pms.hm = f.haomiao(mss % 1000);
                        pms.sec = f.zero(dur % 60);
                        pms.mini = Math.floor((dur / 60)) > 0? f.zero(Math.floor((dur / 60)) % 60) : "00";
                        pms.hour = Math.floor((dur / 3600)) > 0? f.zero(Math.floor((dur / 3600)) % 24) : "00";
                        pms.day = Math.floor((dur / 86400)) > 0? f.zero(Math.floor((dur / 86400)) % 30) : "00";
                        //月份，以实际平均每月秒数计算
                        pms.month = Math.floor((dur / 2629744)) > 0? f.zero(Math.floor((dur / 2629744)) % 12) : "00";
                        //年份，按按回归年365天5时48分46秒算
                        pms.year = Math.floor((dur / 31556926)) > 0? Math.floor((dur / 31556926)) : "0";
                    }else{
                        pms.year=pms.month=pms.day=pms.hour=pms.mini=pms.sec="00";
                        pms.hm = "000";
                        return;
                    }
                    return pms;
                },
                ui: function(){
                    if(o.hm){
                        o.hm.html(f.dv().hm);
                    }
                    if(o.sec){
                        o.sec.html(f.dv().sec);
                    }
                    if(o.mini){
                        o.mini.html(f.dv().mini);
                    }
                    if(o.hour){
                        o.hour.html(f.dv().hour);
                    }
                    if(o.day){
                        o.day.html(f.dv().day);
                    }
                    if(o.month){
                        o.month.html(f.dv().month);
                    }
                    if(o.year){
                        o.year.html(f.dv().year);
                    }
                    setTimeout(f.ui, 1);
                }

            };
            f.ui();
        });
    };
    function getSpeicalTime() {
        var now = new Date;
        now.setMinutes (now.getMinutes () + 10);
        return now;
    };
});
</script>

<span id="downTime"><i class="mini"></i>分<i class="sec"></i>秒<i class="hm"></i></span>

可以进行组件化的操作，使得使用起来更加方便。