<ul>
<li class="day">1</li>
<li class="hour">1</li>
<li class="minute">2</li>
<li class="second">3</li>
</ul>
先创建几个li 分别代表 .day天 .hour小时 .minute分钟 .second 秒
因为倒计时是不断变化的,因此需要定时器来自动变化(setInterval)
三个盒子分别存放时分秒
第一次执行也是间隔毫秒数,因此刚刷新页面会有空白
采取封装函数的方式,这样可以先调用一次这个函数,防止第一次刷新页面有空白我们先调用一次这个函数
var hour = document.querySelector('.hour')//小时
var day = document.querySelector('.day') //天
var minute = document.querySelector('.minute')//分钟
var second = document.querySelector('.second')//秒
var date2 = +new Date('2022-04-05 00:00:00'); //从那一天几点几分开始倒计时
down();//我们先调用一次这个函数,防止第一次刷新页面有空白
//2.开启定时器
setInterval(down, 1000)
function down(time) {
var date1 = new Date()
var haoMiao = (date2 - date1) / 1000;
var dey = parseInt(haoMiao / (24 * 60 * 60));
dey = dey < 10 ? '0' + dey : dey; //天数少于10前面加 0
day.innerHTML = dey
var dey1 = parseInt(haoMiao % (24 * 60 * 60));
var shi = parseInt(dey1 / (60 * 60));
shi = shi < 10 ? '0' + shi : shi; //小时数少于10前面加 0
hour.innerHTML = shi;
var shi1 = parseInt(dey1 % (60 * 60));
var fenzhong = parseInt(shi1 / 60);
fenzhong = fenzhong < 10 ? '0' + fenzhong : fenzhong; //分钟少于10前面加 0
minute.innerHTML = fenzhong;
var miao = parseInt(shi1 % 60);
miao = miao < 10 ? '0' + miao : miao; //秒数少于10前面加 0
second.innerHTML = miao;
}