js实现倒计时

最新推荐文章于 2025-05-28 19:34:53 发布

一颗帅白菜

最新推荐文章于 2025-05-28 19:34:53 发布

阅读量50

点赞数

文章标签： javascript css html

本文链接：https://blog.youkuaiyun.com/qq_52656116/article/details/129926534

版权

文章目录

一、效果图
二、使用步骤

一、效果图

在这里插入图片描述

二、使用步骤

1.html代码

代码如下（示例）：

<div class="timeAll">
     <span class="timeHour">02</span><b>:</b>
     <span class="timeMinute">00</span><b>:</b>
     <span class="timeSecond">00</span>
</div>

1.css代码

代码如下（示例）：

 * {
            padding: 0;
            margin: 0;
        }

.timeAll {
    /* 弹性盒使盒子横向排列 */
    display: flex;
    justify-content: space-between;
    margin: auto;
    width: 130px;
    height: 30px;
    margin-top: 20px;
    overflow: hidden;
}

.timeAll b {
    font-size: 18px;
    font-weight: bold;
    color: white;
}

.timeHour,
.timeMinute,
.timeSecond {
    display: block;
    width: 30px;
    height: 30px;
    background-color: #333;
    font-size: 20px;
    color: white;
    text-align: center;
}

2.js代码

代码如下（示例）：

var hour = document.getElementsByClassName('timeAll')[0].getElementsByClassName('timeHour')[0]
var minute = document.getElementsByClassName('timeAll')[0].getElementsByClassName('timeMinute')[0]
var second = document.getElementsByClassName('timeAll')[0].getElementsByClassName('timeSecond')[0]
var num = 7200
var timer = setInterval(function () {
    num--
    if (num >= 0) {
        hour.innerHTML = time(parseInt(num / 60 / 60) % 24)
        minute.innerHTML = time(parseInt(num / 60) % 60)
        second.innerHTML = time(parseInt(num % 60))
    } else {
        // clearInterval(timer)
        num=10
    }
}, 1000);
// 补零函数
function time(time) {
    return time >= 10 ? time : '0' + time
}