JS使用时间戳实现倒计时
1、点击按钮开始倒计时
2、获取点击按钮
3、开启定时器，每一秒调用一次，显示实时动态倒计时
3.1 获取当前的时间戳
3.2设置截止的时间戳
3.3获取倒计时的时长
3.4 声明变量保存倒计时的几个时间
3.5如果倒计时小于10，则补'0'
3.6把倒计时渲染到页面
代码实现：
html部分
<div>
<span id="day">00天</span>
<span id="house">00时</span>
<span id="minutes">00分</span>
<span id="seconds">00秒</span>
<button class="btn">开始倒计时</button>
</div>
js部分
// 获取倒计时按钮
let btn = document.querySelector('.btn')
btn.addEventListener('click', function() {
//开启定时器
let timeId=setInterval(function() {
//获取当前时间戳
var now = +new Date();
//设置截止时间戳
var end = +new Date("2022/1/19 18:53:00");
//倒计时的时长
let time = end - now;
//声明变量 d,h,m,s保存倒计时的时间
var d, h, m, s;
d = parseInt(time / 1000 / 60 / 60 / 24);
h = parseInt(time / 1000 / 60 / 60 % 24);
m = parseInt(time / 1000 / 60 % 60);
s = parseInt(time / 1000 % 60);
// 补'0'
d = d < 10 ? '0' + d : d
h = h < 10 ? '0' + h : h
m = m < 10 ? '0' + m : m
s = s < 10 ? '0' + s : s
// 将倒计时渲染到每一个span中
document.querySelector('#day').innerHTML = d + "天";
document.querySelector('#house').innerHTML = h + "时";
document.querySelector('#minutes').innerHTML = m + "分";
document.querySelector('#seconds').innerHTML = s + "秒";
if(time<0){
//关闭定时器
clearInterval(timeId)
}
}, 1000);
})
