倒计时效果

Moemiku_39

已于 2022-02-17 12:23:15 修改

阅读量62

点赞数

分类专栏： Javascript

于 2022-02-17 12:18:47 首次发布

本文链接：https://blog.csdn.net/Moemiku_39/article/details/122980544

版权

javascript html

Javascript 专栏收录该内容

11 篇文章 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>
        * {
            margin: 0;
            padding: 0;
        }
        
        .countdowm {
            overflow: hidden;
            margin: 50px auto;
            width: 500px;
            height: 300px;
            background-color: aqua;
            color: #fff;
            text-align: center;
            font-size: 24px;
        }
        
        .countdowm h3 {
            margin-top: 50px;
            font-size: 36px;
        }
        
        .countdowm h5 {
            margin: 20px 0;
            font-size: 28px;
            color: #000;
        }
        
        .countdowm span {
            font-size: 24px;
        }
    </style>
</head>

<body>
    <div class="countdowm">
        <h3>倒计时效果</h3>
        <h5>距离2023年还剩</h5>
        <span class="days"></span>天
        <span class="hou"></span>时
        <span class="min"></span>分
        <span class="sec"></span>秒

    </div>
    <script>
        var days = document.querySelector('.days')
        var hou = document.querySelector('.hou')
        var min = document.querySelector('.min')
        var sec = document.querySelector('.sec')
        // 获取总时间毫秒数
        var totalTime = +new Date('2023-1-1 00:00:00')
        // 先调用一次函数 确保页面一加载就开始进行倒计时
        countTime()；
        setInterval(countTime, 1000)

        function countTime(time) {
            // 获取当前时间毫秒数
            var nowTime = +new Date();
           
            // 获取倒计时总秒数
            var timer = (totalTime - nowTime) / 1000;
            // 获取剩余年份
            var dd = parseInt(timer / 60 / 60 / 24);
            dd = dd < 10 ? '0' + dd : dd;
            days.innerHTML = dd;
            var hh = parseInt(timer / 60 / 60 % 24);
            hh = hh < 10 ? '0' + hh : hh;
            hou.innerHTML = hh;

            var mm = parseInt(timer / 60 % 60);
            mm = mm < 10 ? '0' + mm : mm
            min.innerHTML = mm;

            var ss = parseInt(timer % 60);
            ss = ss < 10 ? '0' + ss : ss;
            sec.innerHTML = ss;
        }
    </script>
</body>

</html>

Moemiku_39

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
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>D.
复制链接

扫一扫