（常用代码）原声JS 实现倒计时的效果。分/秒/毫秒/

（常用代码）原声JS 实现倒计时的效果。分/秒/毫秒/

第一步：构建HTML 结构和样式

<!-- 构建 HTML -->
<div class="timing">
    <span class="minute date">07</span>
    <span class="colon">:</span>
    <span class="second date">16</span>
    <span class="colon">:</span>
    <span class="millisecond date">87</span>
</div>

<!--编写CSS 美颜效果-->
.timing{
    color: #ed4123;
    font-size: 20px;
    font-weight: 600;
    font-family: sans-serif;
    display: flex;
}
.timing > span{
    display: block;
    float: left;
}
.date{
    width: 35px;
        text-align: center; 
}

第二步：JS setInterval 间断执行操作DOM

/**
 * 操作页面 倒计时模块的 时间节点
 * @param {Object} minute 分
 * @param {Object} second 秒
 * @param {Object} millisecond 毫秒
 */
function timingInterVal(minute,second,millisecond) {
    var timing = setInterval(function() {
        //设置毫秒数
        if((Number(millisecond.innerHTML)) <= 0 ) {
            //设置秒数
            if((Number(second.innerHTML)) <= 0) {
                //设置分数
                if((Number(minute.innerHTML)) <= 0) {
                    //分钟倒计时结束
                    clearInterval(timing);
                    //结束 具体操作
                    return false;
                }else {
                    (Number(minute.innerHTML)) <= 10 ? minute.innerHTML = ('0' + ((Number(minute.innerHTML)) - 1)) : minute.innerHTML = ((Number(minute.innerHTML)) - 1);
                }
                second.innerHTML = '60';
            }else {
                (Number(second.innerHTML)) <= 10 ? second.innerHTML = ('0' + ((Number(second.innerHTML)) - 1)) : second.innerHTML = ((Number(second.innerHTML)) - 1);
            }
            millisecond.innerHTML = '99';
        }else {
            (Number(millisecond.innerHTML)) <= 10 ? millisecond.innerHTML = ('0' + (Number(millisecond.innerHTML) - 1)) : millisecond.innerHTML = (Number(millisecond.innerHTML) - 1);
        }
    },9);
}

//遍历页面中定义的 存在的倒计时 HTML 模块。
var timing = document.getElementsByClassName('timing');
for(var i = 0;i<timing.length;i++) {
    //分
    var minute = timing[i].querySelector('.minute');
    //秒
    var second = timing[i].querySelector('.second');
    //毫秒
    var millisecond = timing[i].querySelector('.millisecond');

    timingInterVal(minute,second,millisecond);
}