js倒计时时钟

太过爱你忘了你带给我的痛 2022-05-16 06:07 183阅读 0赞

<!doctype html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>倒计时js代码</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            body {
                font-size: 16px;
                text-align: center;
                font-family: arial;
            }
    
            .time {
                margin-top: 10px;
                border: 1px solid red;
                height: 30px;
                padding: 2px;
                line-height: 30px;
            }
        </style>
    </head>
    
    <body>
    <div class="time">
        <span id="t_d">00天</span>
        <span id="t_h">00时</span>
        <span id="t_m">00分</span>
        <span id="t_s">00秒</span>
    </div>
    <script>
        setInterval(function() {
            var EndTime = new Date('2017/04/05 00:00:00');
            var NowTime = new Date();
            var t = EndTime.getTime() - NowTime.getTime();
            var d = 0;
            var h = 0;
            var m = 0;
            var s = 0;
            if (t >= 0) {
                d = Math.floor(t / 1000 / 60 / 60 / 24);
                h = Math.floor(t / 1000 / 60 / 60 % 24);
                m = Math.floor(t / 1000 / 60 % 60);
                s = Math.floor(t / 1000 % 60);
            }
            document.getElementById("t_d").innerHTML = d + "天";
            document.getElementById("t_h").innerHTML = h + "时";
            document.getElementById("t_m").innerHTML = m + "分";
            document.getElementById("t_s").innerHTML = s + "秒";
        }, 10);
    </script>
    
    </body>
    
    </html>

--------------------

![20191229112121499.png][]

想要整理更多的碎片知识，扫码关注下面的公众号，让我们在哪里接着唠！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70][]

[20191229112121499.png]: /images/20220516/3c22eeb7866a49b98e71934da6f8da3f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70]: /images/20220516/5fee6959ed044a1a82bea67f2e6b2c4e.png