分析
- 这个倒计时是不断变化的,需要定时器来自动变化(setnterval)
- 三个黑色盒子里面的分别存放时分秒
- 三个黑色盒子利用innerHTML放入计算的小时分钟秒数
- 第一次执行也是间隔毫秒数,因此刷新页面会有空白
- 采用封装函数的方式,可以先调用一次函数,防止刷新页面的空白问题
代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>333333</title>
<style>
.box {
position: relative;
border-radius: 5px;
margin: 200px auto;
background-color: red;
width: 250px;
height: 300px;
}
.hour,
.minute,
.second {
border-radius: 5px;
margin-left: 5px;
background-color: black;
color: white;
padding: 10px;
}
.sbox {
display: block;
margin-left: auto;
margin-right: auto;
margin-left: auto;
margin-right: auto;
width: 60%;
}
</style>
</head>
<body>
<div class="box">
<div class="sbox">
<span class="hour"></span>
<span class="minute"></span>
<span class="second"></span>
</div>
</div>
<script>
//获取元素
var hour = document.querySelector('.hour');
var minute = document.querySelector('.minute');
var second = document.querySelector('.second');
var inputTime = +new Date('2022-6-30 00:00:00');//返回的是用户输入时间总的毫秒数
countDown();//开启定时器,在刷新时定时器方块不会有空白
//开启定时器
setInterval(countDown, 1000);
function countDown() {
var nowTime = +new Date();//返回的是当前时间总的毫秒数
var times = (inputTime - nowTime) / 1000;//times是剩余时间总是秒数
var d = parseInt(times / 60 / 60 / 24);//.天
d = d < 10 ? '0' + d : d;
var h = parseInt(times / 60 / 60 % 24);//时
h = h < 10 ? '0' + h : h;
hour.innerHTML = h;//把剩余的小时给小时盒子
var m = parseInt(times / 60 % 60);//分
m = m < 10 ? '0' + m : m;
minute.innerHTML = m;
var s = parseInt(times % 60);//当前的秒
s = s < 10 ? '0' + s : s;
second.innerHTML = s;
}
</script>
</body>
</html>