js制作倒计时装置

1. 先设置计时器装置的html部分

<div class = 'main'>
    <div id = 'min' class = 'block'>00</div>   // 最左侧的分钟时间格
    <div>:</div>                 // 分钟时间格与秒数时间格之间的冒号
    <div id = 'sec' class = 'block'>00</div>   // 最右侧的秒数时间格
</div>

2. 再对刚刚搭建完的html框架进行css样式设置

（1）对页面进行初始化设置，并完成main部分的css样式设置

<!--对页面进行初始化 begin-->
*{
    margin: 0;
    padding: 0;
}
<!--对页面进行初始化 end-->

.main{
    display: flex;   // 对main中的3个div进行弹性布局
    justify-content: center;   // 对main中的3个div进行水平居中
    align-items: center;   // 对main中的3个div进行垂直居中
    
    <!--对main进行宽高设置，并使其在浏览器中垂直水平居中 begin-->
    width: 300px;
    height: 175px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    <!--对main进行宽高设置，并使其在浏览器中垂直水平居中 end-->
    
    background: white;   // 将main设置为白色背景
    font-size: 48px;   // 将main中的元素字体大小设置为48px
}

（2）对main中的第二个div元素（即分钟时间格与秒数时间格之间的冒号）进行CSS样式设置

.main div:nth-child(2){
    width: 25px;   // 将该div的宽度设置为25px
    height: 30px;   // 将该div的高度设置为30px
    line-height: 30px;   //完成该div内部元素的垂直居中
    text-align: center;   //完成该div内部元素的水平居中
}

（3）对分钟时间格与秒数时间格进行CSS样式设置

.main .block{
    width: 110px;   // 将block的宽度设置为110px
    height: 110px;    // 将block的高度设置为110px
    line-height: 110px;   //完成block内部元素的垂直居中
    text-align: center;   //完成block内部元素的水平居中
    background: black;   //将block的背景颜色设置为黑色
    color:white;   //将block内部的字体颜色设置为白色
}

3. 以上CSS样式全部设置完毕之后即可开始设置js部分

// 分别获取id名为min和sec的对象
let min = document.getElementById('min');
let sec = document.getElementById('sec');

// 创建一个函数进行补零操作，当val为个位数时，自动在其前方补上'0'
function repairZero(val){
    return val < 10 ? ('0' + val) : val;   // 三元表达式进行判断
}

// 定义一个倒计时结束的时间
let time = new Date('2019-12-05 18:00:00');

let timerId = setInterval(() = > {
    // 得到当前时间距离结束时间的秒数
    let secTotal = parseInt((time - new Date)/1000);
    
    if (secTotal < 0) {
        // 通过clearInterval函数对timerId进行终止
        clearInterval(timerId);
        // 当secTotal小于0时，倒计时结束，body背景颜色变为skyblue
        document.body.style.backgroundColor = 'skyblue';
    } else {
        // 将距离结束时间的总秒数除以60并通过parseInt进行取整得到分钟数，再通过repaireZero函数对分钟时间格进行补零操作
        min.innerHTML = repaireZero(parseInt(secTotal / 60));
        // 将距离结束时间的总秒数对60进行取余得到秒数，再通过repaireZero函数对秒数时间格进行补零操作
        min.innerHTML = repaireZero(secTotal % 60);
    }
},1000);

该计时装置只是设置了分钟格和秒数格，如需要显示小时格，可参照分钟格和秒数格