今天简单练习以下倒计时效果的实现，主要用到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;}
