实现时间倒计时,时间到达0时0分0秒结束
1.先写出静态结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
height: 100px;
margin: 100px auto;
}
span {
display: inline-block;
width: 30px;
height: 40px;
line-height: 40px;
background-color: #222;
color: #fff;
text-align: center;
font-weight: 700;
}
</style>
</head>
<body>
<div class="box">
<span id="spanHour">01</span>
<span>:</span>
<span id="spanMin">10</span>
<span>:</span>
<span id="spanSec">15</span>
</div>
</body>
</html>
目前效果是这样的
2.获取页面元素: spanHour spanMin spanSec
let h = document.getElementById('spanHour');
let m = document.getElementById('spanMin');
let s = document.getElementById('spanSec');
3.需要按照事件做动画效果:一定要用到定时器:let timeId = setInterval(,1000)
let timeId = setInterval(function () {
},10);
//毫秒改成10是为了更快看到效果
4.获取元素中间的数据:innerText
let timeId = setInterval(function () {
let hTime = h.innerText;
let mTime = m.innerText;
let sTime = s.innerText;
},10);
5.减去1s
let timeId = setInterval(function () {
let hTime = h.innerText;
let mTime = m.innerText;
let sTime = s.innerText;
},10);
sTime--
6.判定秒: 如果秒小于0, 秒应该变成59
sTime--
if (sTime < 0) {
sTime = 59;
// 分钟应该减少1m
mTime--
};
7 判定分: 如果分小于0, 分应该变成59
if (mTime < 0) {
mTime = 59
// 8. 减1h
hTime--
};
// console.log(hTime.mTime, sTime)//控制台检测已经有变动,定时器没动是因为还未赋值回显
数据要保证有2位
sTime = sTime < 10 ? "0" + sTime : sTime;
mTime = mTime < 10 ? "0" + parseInt(mTime) : mTime;
hTime = hTime < 10 ? "0" + parseInt(hTime) : hTime;
//sTime不加parseInt是因为自减会改变自己
// console.log(typeof (sTime)) //number
// console.log(typeof (mTime)); //string
数据要回显给html
h.innerText = hTime;
m.innerText = mTime;
s.innerText = sTime;
- 判定: 时分秒是否全部归0: 清除定时器
if (hTime == 0 && mTime == 0 && sTime == 0) {
clearInterval(timeId);
}
}, 10);
总结:1.找到时分秒之间的关系.
2.获取元素后修改数据一定要回写到DOM元素中
3.为了保证数据的整个结构一致(都是2位数):需要补充前导0(时分秒小于10),同时要注意数据本身拿到的是字符串,所以补充前导0的时候,要注意字符串本身是否已经包含了前导0;
还有不明白的可以留言.