1.简单div布局
<div class="time">
<span>0</span>
<span class="hour">0</span>
<span>:</span>
<span class="hour">0</span>
<span class="hour">0</span>
<span>:</span>
<span class="hour">0</span>
<span class="hour">0</span>
</div>
2.功能实现
实现思路:1:60:60,定义好时分秒的递减条件,即可完成倒计时功能(原生逻辑实现)
var spins = document.querySelector('.time');
console.log(spins)
var box = spins.getElementsByClassName('hour')
var hour_0 = 1;
var min_1 = 5
var min_0 = 9
var sex_1 = 5
var sex_0 = 9
var ivt = setInterval(function() {
box[0].innerHTML = hour_0
box[1].innerHTML = min_1
box[2].innerHTML = min_0
box[3].innerHTML = sex_1
box[4].innerHTML = sex_0
sex_0--
if (sex_0 == -1) {
sex_0 = 9
sex_1--
}
if (sex_1 == -1) {
sex_1 = 5
min_0--
}
if (min_0 == -1) {
min_0 = 9
min_1--
}
if (min_1 == -1) {
min_1 = 5
hour_0--
}
if (hour_0 == -1) {
hour_0 = 0
clearInterval(ivt)
}
}, 1000)