js倒计时

核心原理
1、封装一个函数，获取当前时间和用户输入时间两者的总毫秒数，除以1000，得到秒数存为变量；
2、用公式分别把月日分秒算出来存为变量赋值给span.innerHTML；

JS

// 获取元素
   var mouth = document.querySelector('.mouth')
   var day = document.querySelector('.day');
   var hour = document.querySelector('.hour');
   var minute = document.querySelector('.minute');
   var second = document.querySelector('.second');
   var inputTime = +new Date('2022-1-1 00:00:00');//返回的是用户输入的时间的总的毫秒数
   countDown();//我们先调用一次这个函数，防止第一次打开有空白

   // 开启定时器
   setInterval(countDown,2000)

   // 封装倒计时函数
   function countDown() {
       var nowTime = +new Date();//返回的是当前时间总的毫秒数
       var times = (inputTime - nowTime) / 1000;//返回的是剩余时间的秒数
       console.log(times);

       var mou = parseInt((times / 60 / 60 / 24 / 30) % 12);//月
       mou = mou < 10 ? '0'+ mou : mou;
       mouth.innerHTML = mou + '月';//把剩余的月给 月盒子

       var d = parseInt((times / 60 / 60 / 24) %30);//天
       d = d < 10 ? '0'+ d : d;
       day.innerHTML = 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 + '秒';//把剩余的秒给 秒盒子
   }

HTML

    <div>
        <span class="mouth"></span>
        <span class="day">1</span>
        <span class="hour">2</span>
        <span class="minute">3</span>
        <span class="second">4</span>

    </div>

CSS

        div span {
            float: left;
            width: 50px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background-color: #333;
            display: block;
            margin: 5px;
            color: #fff;
            font-size: 16px;
            font-weight: 400;
        }