倒计时效果

最新推荐文章于 2024-05-28 11:44:38 发布

f_3345938485

最新推荐文章于 2024-05-28 11:44:38 发布

阅读量125

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/f_3345938485/article/details/124285229

版权

运行代码：

<style>
        div {
            margin: 200px;
        }
        
        span {
            display: inline-block;
            width: 40px;
            height: 40px;
            background-color: #333;
            font-size: 20px;
            color: #fff;
            text-align: center;
            line-height: 40px;
        }
    </style>
</head>

<body>
    <div>
        <!-- 行内元素 -->
        <span class="hour">时</span>
        <span class="minute">分</span>
        <span class="second">秒</span>
    </div>
    
    <script>
        // 1. 获取元素
        var hour = document.querySelector('.hour');
        var minute = document.querySelector('.minute');
        var second = document.querySelector('.second');

        var inputTime = +new Date('2022-4-20 24:00:00');

        // 2. 声明函数
        function countDown() {
            var nowTime = +new Date();
            var times=(inputTime-nowTime) / 1000;
            var h=parseInt(times/ 60 / 60 % 24);
            h= h < 10 ? '0'+ h : h;
            hour.innerHTML = h;
            var m = parseInt(times / 60 % 60);
            m= m < 10 ? '0' + m : m;
            minute.innerHTML = m;
            var s=parseInt(times % 60);
            s =s <10 ? '0' + s : s;
            second.innerHTML = s;
        }

        countDown();
      // 3. 开启闹钟定时器 setInterval(param1, param2);
        setInterval(countDown, 1000);
    </script>
</body>

运行结果：

f_3345938485

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
倒计时效果

运行代码：<style> div { margin: 200px; } span { display: inline-block; width: 40px; height: 40px; background-color: #333; font-size: 20px;
复制链接

扫一扫