JavaScript实现春节倒计时

最新推荐文章于 2024-08-19 12:23:25 发布

emm_10_01

最新推荐文章于 2024-08-19 12:23:25 发布

阅读量335

点赞数 11

文章标签： javascript css 前端 html

本文链接：https://blog.csdn.net/emm_10_01/article/details/122461494

版权

运行结果：

在这里插入图片描述

完整代码：

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

<head>
    <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>Document</title>
    <style>
        .maxbox {
            width: 640px;
            height: 400px;
            margin: 200px auto;
            background-image: url(./3.jpg);
            background-size: 640px 400px;
            color: yellow;
            position: relative;

        }

        #tian {
            width: 57px;
            height: 32px;
            font-size: 26px;
            position: absolute;
            left: 66px;
            top: 27px;
            background-color: black;
            text-align: center;
            line-height: 32px;
            border-radius: 17px;
        }

        #shi {
            width: 38px;
            height: 32px;
            position: absolute;
            left: 210px;
            top: 8px;
            font-size: 26px;
            background-color: black;
            border-radius: 50%;
            text-align: center;
            line-height: 32px;
        }

        #fen {
            width: 38px;
            height: 32px;
            position: absolute;
            left: 332px;
            top: 29px;
            font-size: 26px;
            background-color: black;
            border-radius: 50%;
            text-align: center;
            line-height: 32px;
        }

        #miao1 {
            width: 38px;
            height: 32px;
            position: absolute;
            left: 467px;
            top: 6px;
            font-size: 26px;
            background-color: black;
            border-radius: 50%;
            text-align: center;
            line-height: 32px;
        }
    </style>
</head>
<body>
    <div class="maxbox">
        <div id="tian"></div>
        <div id="shi"></div>
        <div id="fen"></div>
        <div id="miao1"></div>
    </div>
    <script>
        var box = document.querySelector('.maxbox');
        var tian = document.getElementById("tian");
        var shi = document.getElementById("shi");
        var fen = document.getElementById("fen");
        var maio1 = document.getElementById("maio1");

        function daojishi() {
            var nowdate = new Date(); //获取当前的时间
            var chunjie = new Date("2022 / 2 / 1 "); //获取春节的时间
            chunjie.setHours(0, 0)
            var num = chunjie.getTime() - nowdate.getTime(); //获取时间差
            //获取天数
            tiantime = Math.floor(num / 86400 / 1000);
            // 获取小时数
            xiaoshi = Math.floor((num % (86400 * 1000)) / 3600 / 1000)
            console.log(xiaoshi);
            xiaoshi = xiaoshi < 10 ? '0' + xiaoshi : xiaoshi;
            // 获取分钟数
            fenzhong = Math.floor((num % (86400 * 1000 * 3600)) / 60 / 1000) % 60
            console.log(fenzhong);
            fenzhong = fenzhong < 10 ? '0' + fenzhong : fenzhong;
            // 获取秒
            miao = Math.floor(num / 1000) % 60
            console.log(miao);
            miao = miao < 10 ? '0' + miao : miao;
            //给i为shi的sapn添加定时小时内容
            tian.innerHTML = `${tiantime}天`
            shi.innerHTML = `${xiaoshi}`
            fen.innerHTML = `${fenzhong}`
            miao1.innerHTML = `${miao}`
        }
        setInterval(daojishi, 1000)
    </script>
</body>

</html>