学习目标：
学会使用独立写倒计时
例如：
- 京东秒杀活动
实现思路：
样式部分:
1.先设置一个div盒子
2.再将时分秒搞成三个span 注意:数据是字符串
JavaScript部分:
1.先获取到三个span的元素
2.设置一个定时器,每一秒种执行一次
3.获取里面的时分秒 并进行修改 注意:span中的默认数据是字符串 这个时候需要转换成数字
4.每获取一次s--
5.判断分秒是否小于零
6.补零操作
7.将数据重新赋值用补完零的数据
8.当时分秒全为0时就停止计时器
代码部分:
-
<style>
/* 确定整个盒子的数据 */
div{
margin: 200px auto;
width: 400px;
height: 120px;
font-size: 50px;
}
/* 控制三个盒子的数据 */
span{
display: inline-block;
width: 100px;
height: 100px;
background-color: #000;
color: #fff;
font-size: 50px;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div>
<!-- 注意:这里面的数据是字符串,后面需要进行转换 -->
<span id="hour">05</span> : <span id="minute">32</span> : <span
id="second">54</span>
</div>
<script>
//获取元素
let hourSpan =document.getElementById('hour');
let minuteSpan =document.getElementById('minute');
let secondSpan =document.getElementById('second');
//设置一个定时器
let res = setInterval(()=>{
//获取到时分秒并将其进行类型转换
let h = parseInt(hourSpan.innerHTML);
let m = parseInt(minuteSpan.innerHTML);
let s = parseInt(secondSpan.innerHTML);
//定时器每执行一次,就减少一秒
s--;
//进行判断 如果秒(分)种小于零了就将秒变成59并将分钟(小时)减一
if(s<0){
s=59;
m--;
}
if(m<0){
m=59;
h--;
}
//补零操作
h=h<10?'0'+h:h;
m=m<10?'0'+m:m;
s=s<10?'0'+s:s;
//补完零 就刷新页面
hourSpan.innerHTML=h;
minuteSpan.innerHTML=m;
secondSpan.innerHTML=s;
console.log(h,m,s)
//如果时间都小于零就清除定时器
if(h==0&&m==0&&s==0){
clearInterval(res);
}
},1000);
</script>
</body>
4075
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
