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

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

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

<div class="timing">
	<span class="minute date">07span>
	<span class="colon">:span>
	<span class="second date">16span>
	<span class="colon">:span>
	<span class="millisecond date">87span>
div>

.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);
}