您的位置:首页 > Web前端 > JavaScript

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

2018-01-30 14:39 851 查看


(常用代码)原声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);
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息