html+css+javascript实现倒数计时

最新推荐文章于 2024-04-09 14:07:34 发布

百事可樂@

最新推荐文章于 2024-04-09 14:07:34 发布

阅读量333

点赞数

分类专栏：前端文章标签： css html javascript

本文链接：https://blog.csdn.net/qq_53756771/article/details/128334685

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

代码如下：

<!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>
        /*基本样式*/
        .one {
            min-width: 50px;
            height: 30px;
            /* border: 1px solid; */
            background-color: aqua;
            font-size: 24px;
            display: none;
        }
        
        div {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 140px;
            height: 40px;
            margin-top: -20px;
            margin-left: -70px;
            display: flex;
            justify-content: space-around;
        }
        
        span {
            font-size: 24px;
            display: block;
            width: 40px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background-color: black;
            color: white;
            border-radius: 5px;
        }
        /*基本样式*/
    </style>
</head>

<body>
    <div>
        <span class="hours"></span>
        <span class="times"></span>
        <span class="minutes"></sp>
    </div>
    <script>
        //获取元素
        var hours = document.querySelector('.hours');
        var divtimes = document.querySelector('.times');
        var minutes = document.querySelector('.minutes')
        //设置最终事件
        var targetTime = +new Date('2022-12-15 22:00:00');
        countDown()
        var set = setInterval(countDown, 1000);

        function countDown() {
            //先获取当前事件
            var nowTime = +new Date();
            var remainderTime = (targetTime-nowTime)/1000; //获得秒数
            var hour = parseInt(remainderTime / 60 / 60 % 24); //时
            var trueHour = (hour < 10) ? '0' + hour : hour;
            hours.innerHTML = trueHour;
            var times = parseInt(remainderTime / 60 % 60); //分
            var trueTimes = (times < 10) ? '0' + times : times;
            divtimes.innerHTML = trueTimes;
            var minute = parseInt(remainderTime % 60); //秒
            var trueMinute = (minute < 10) ? '0' + minute : minute
            minutes.innerHTML = trueMinute;
            if(hour==0&&times&&minute==0){
                window.clearInterval(set);
            }
        }
    </script>
</body>

</html>

em....虽然没有什么卵用，但是。。。。自己写出来了就记录一下吧