倒计时

最新推荐文章于 2024-06-12 14:02:38 发布

吴机智

最新推荐文章于 2024-06-12 14:02:38 发布

阅读量75

点赞数

分类专栏：案例文章标签： js

本文链接：https://blog.csdn.net/m0_49893750/article/details/108502838

版权

案例专栏收录该内容

45 篇文章 0 订阅

订阅专栏

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            background-color: #ececec;
            width: 400px;
            height: 400px;
            margin: 100px auto;
            text-align: center;
        }

        h3 {
            display: block;
            color: white;
            padding-top: 20px;
        }

        div {
            margin-bottom: 20px;
        }

        input {
            width: 70px;
            text-align: center;
        }

        button {
            display: block;
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background-color: black;
            color: yellow;
            font-size: 30px;
            margin: 20px auto;
            outline: none;
        }

        span {
            color: yellow;
        }

        .num {
            font-size: 40px;
        }

        .div1 {
            color: white;
            font-size: 20px;
        }

        .div2 {
            font-size: 12px;
        }

        .span1 {
            font-size: 16px;
            font-weight: bold;
        }

        p {
            font-size: 12px;
        }
    </style>
</head>

<body>
    <div class="box">
        <h3>倒计时</h3>
        <p>
            请输入: <input type="text" value="2020" />年<input type="text" value="10" />月<input type="text" value="1" />日
        </p>
        <button>开始</button>
        <div class="div2">
            现在距离-<span class="span1">2020年6月07日</span>-还剩：
        </div>
        <div class="div1">
            <span class="num">0</span>天 <span class="num">0</span>小时
            <span class="num">0</span>分 <span class="num">0</span>秒
        </div>
    </div>

    <script>
        // 在输入框中输入年月日，点击开始，计算倒计时
        var inps = document.getElementsByTagName('input');
        var button = document.getElementsByTagName('button')[0];
        var spans = document.getElementsByTagName('span');
        console.log(inps, button, spans);
        var time = null;
        // 添加事件
        button.onclick = function () {
            // 清除定时器
            clearInterval(time);
            // 具体做的事情
            // 获取到年月日
            var yy = inps[0].value;
            var mm = inps[1].value;
            var dd = inps[2].value;
            console.log(yy, mm, dd);
            move(yy, mm, dd);

            time = setInterval(function () {
                move(yy, mm, dd);
            }, 1000);
        }

        function move(y, m, d) {
            // 1. 创建时间对象(当前, 未来)
            var cur = new Date();
            var fut = new Date(y, m - 1, d, 0, 0, 0);
            // 2. 求两个时间之间的毫秒差值
            var cha = fut.getTime() - cur.getTime();
            // 3. 天  cha/1天的毫秒数
            var day = Math.floor(cha / 1000 / 60 / 60 / 24);
            // 4. 小时: (cha-天)
            var hh = Math.floor(cha / 1000 / 60 / 60 % 24);
            // 5. 分钟: 
            var min = Math.floor(cha / 1000 / 60 % 60);
            // 6. 秒
            var ss = Math.floor(cha / 1000 % 60);
            spans[0].innerHTML = y + '年' + m + '月' + d + '日';
            spans[1].innerHTML = day;
            spans[2].innerHTML = hh;
            spans[3].innerHTML = min;
            spans[4].innerHTML = ss;
        }
    </script>
</body>

</html>