倒计时代码解析-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41563226/article/details/80899356
<html>

<head>
    <title>倒计时</title>
    <!--以下为css样式-->
    <style type="text/css">
        .daojishi h2 {
            font-family: Helvetica, Microsoft YaHei, Arial, sans-serif;
            font-size: 14px;
            margin-bottom: 5px;
            color: #151515;
        }

        .daojishi #timer {
            font-family: Helvetica, Microsoft YaHei, Arial, sans-serif;
            font-size: 14px;
            color: #151515;
            font-weight: bold;
        }
    </style>

</head>

<body>
    <div class="daojishi">
        <h2>剩余时间为：</h2>
        <div id="timer">
        </div>

        <h2>数据是
            <span id="spans"></span>
        </h2>
    </div>

    <script>
        // new Date(年份, 月份, 日, 时, 分, 秒)

        var elements = document.getElementById("timer")
        var Future = new Date(2018, 6, 21, 10, 0, 8)
        // timer(elements, Future)

        class bctime {
            constructor() {
                this.el = "",
                this.times = ""
            }
            toString(el, times) {
                timer(el, times)
                function timer(el, times) {
                    var ts = (times) - (new Date());//计算剩余的毫秒数  
                    var dd = parseInt(ts / 1000 / 60 / 60 / 24, 10);//计算剩余的天数  
                    var hh = parseInt(ts / 1000 / 60 / 60 % 24, 10);//计算剩余的小时数  
                    var mm = parseInt(ts / 1000 / 60 % 60, 10);//计算剩余的分钟数  
                    var ss = parseInt(ts / 1000 % 60, 10);//计算剩余的秒数  
                    dd = checkTime(dd);
                    hh = checkTime(hh);
                    mm = checkTime(mm);
                    ss = checkTime(ss);
                    el.innerHTML = dd + "天" + hh + "时" + mm + "分" + ss + "秒";
                    setInterval(() => {
                        timer(el, times)
                    }, 1000);
                    if (parseInt(dd) == 0 && parseInt(hh) == 0 && parseInt(mm) == 0 && parseInt(ss) == 0) {
                        clearInterval(timer)
                    }
                }
                function checkTime(i) {
                    if (i < 10) {
                        i = "0" + i;
                    }
                    return i;
                }
            }
        }

        var newbctime=new bctime();
        newbctime.toString(elements,Future)

        // var spans = document.getElementById("spans")
        // text = spans
        // debugger
        // function test(els) {
        //     els.innerHTML = "夏甜甜"
        //     console.log(els)
        // }
        // test(text)
    </script>
</body>

</html>
倒计时案例
