原生 js 封装 倒计时

 <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;
        }