倒计时

<!DOCTYPE html>
<html lang="en">

<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倒计时</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #block {
            position: relative;
            width: 420px;
            height: 420px;
            background: #fbbff8;
            border-radius: 50%;
            margin: 100px auto;
        }

        #shi_jian {
            position: absolute;
            width: 320px;
            height: 100px;
            top: 150px;
            left: 50px;
            /* background: paleturquoise;*/
            text-align: center;
            line-height: 100px;
            font-size: 18px;
        }
    </style>
</head>

<body>
    <div id="block">
        <div id="shi_jian"></div>
    </div>
</body>

</html>
<script>
    window.onload = function () {
        var go_time = new Date("2021/12/2 18:00:00"); //这里可以修改时间
        //  countdown:倒计时
        function countdown() {
            var now_time = new Date();
            var alltime = go_time.getTime() - now_time.getTime();  //总的时间(毫秒)
            var haoscend = alltime % 1000;  //毫秒
            //console.log(haoscend);
            var scend = parseInt((alltime / 1000) % 60);  //秒
            //console.log(scend);
            var minute = parseInt((alltime / 1000 / 60) % 60);  //  分钟
            // console.log(minute);
            var hour = parseInt((alltime / 1000 / 60 / 60) % 24);   //小时
            // console.log(hour);
            var day = parseInt((alltime / 1000 / 60 / 60 / 24) % 30);   //天数
            // console.log(day);
            var month = parseInt((alltime / 1000 / 60 / 60 / 24 / 30) % 12); //月
            // console.log(month);
            var btime = document.getElementById("block");
            var time1 = document.getElementById("shi_jian");
            time1.innerHTML = "下班倒计时:" + month + "月" + day + "天" + hour + "时" + minute + "分" + scend + "秒" + (haoscend < 10 ? "00" + haoscend : haoscend < 100 ? "0" + haoscend : haoscend);
            setTimeout(countdown, 1);  //不加括号
        }
        countdown();
    }
    let demo = document.getElementById("demo");
</script>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容