JS倒计时效果实现

    今天简单练习以下倒计时效果的实现，主要用到window对象的定时器和Date对象。首先我们先建立一个简单的布局。

<div class="time">
        <div class="left_text">当前场次</div>
        <span class="hours">00</span>
        <span class="dot">
            <i></i>
            <i></i>
        </span>
        <span class="min">00</span>
        <span class="dot">
            <i></i>
            <i></i>
        </span>
        <span class="sec">00</span>
        <div class="right_text">后结束抢购</div>
 </div>


 .time{
            width: 200px;
            margin: 200px auto;
            background-color: brown;
        }
        span{
            float: left;
        }
        i{
            display: block;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            margin: 4px;
            background-color: black;

        }
        span.hours,span.min,span.sec{
            width: 30px;
            height: 20px;
            background-color: slategray;
        }

效果如图

   下面我们实现这个倒计时的功能， 首先这个倒计时每秒都要执行一次，所以我们使用setInterval(countDown,1000);这个定时器，里面来一个回调函数这里取名叫做countDown。

   然后我们来编写这个函数，我们只要获得当前时间，用结束时间减去当前时间就是剩余时间，然后赋值给我们的对应元素。

  使用date对象获得当前时间

 var nowtime = +new Date();

下面是剩余时间，这里先写一个inputime变量当作我们的结束时间，后面我们再给他赋值。

var timeremain = (inputime - nowtime) / 1000; //获得剩余的秒数

最后我们分别计算剩余的时分秒并赋值给对应的元素

 var hour = parseInt(timeremain / 60 / 60); //剩余小时取整  下同
  hour = hour < 10 ? '0' + hour : hour;  // 小时数小于10 前面拼接一个0   下同
 hours.innerHTML=hour;        //赋值给对应的元素  下同

 var m = parseInt(timeremain / 60 % 60);
 m = m < 10 ? '0' + m : m;
 min.innerHTML=m;
 
 var s = parseInt(timeremain % 60);
 s = s < 10 ? '0' + s : s;
 sec.innerHTML=s;

  然后我们输入一个时间inputime,这里这个变量放在外面当作全局变量。

   var inputime = +new Date('2022 4 12 15:30:00');

最后我们刷新的时候还会发现数字会空白一秒才会显示，因为我们countDown函数刷新后也会停止一秒后执行，所以我们可以在这个定时器前面让countDown先执行一次就解决了了这个问题。

如下附上完整js代码，以及效果图

var hours=document.querySelector('.hours');
        var min=document.querySelector('.min');
        var sec=document.querySelector('.sec');
        var inputime = +new Date('2022 4 12 15:30:00');
        countDown();                   //先执行一次这个函数  防止页面刷新出现空白
        setInterval(countDown,1000);
        function countDown() {
                    var nowtime = +new Date();
                   
                    var timeremain = (inputime - nowtime) / 1000;   //剩余时间
                    var day = parseInt(timeremain / 60 / 60 / 24);
                    day = day < 10 ? '0' + day : day;
                    var hour = parseInt(timeremain / 60 / 60);
                    hour = hour < 10 ? '0' + hour : hour;
                    hours.innerHTML=hour;
                    var m = parseInt(timeremain / 60 % 60);
                    m = m < 10 ? '0' + m : m;
                    min.innerHTML=m;
                    var s = parseInt(timeremain % 60);
                    s = s < 10 ? '0' + s : s;
                    sec.innerHTML=s;
                }