JS倒计时效果

直接记录下代码以防忘记：

$(function(){ 
  countDown("2019/11/23 9:30:59","#colockbox1"); 
}); 
function countDown(time,id){ 
  var day_elem=$(id).find('.day'); 
  var hour_elem=$(id).find('.hour'); 
  var minute_elem=$(id).find('.minute'); 
  var second_elem=$(id).find('.second'); 
  var end_time = new Date(time).getTime();
  var sys_second = (end_time-new Date().getTime())/1000; 
  var timer = setInterval(function(){ 
    if(sys_second>1) { 
      sys_second-=1; 
      var day=Math.floor((sys_second/3600)/24); 
      var hour=Math.floor((sys_second/3600)%24); 
      var minute=Math.floor((sys_second/60)%60); 
      var second=Math.floor(sys_second%60); 
      $(day_elem).text(day+'天');
      $(hour_elem).text((hour<10?"0"+hour:hour)+'时');
      $(minute_elem).text((minute<10?"0"+minute:minute)+'分'); 
      $(second_elem).text((second<10?"0"+second:second)+'秒');
    } 
    else { 
      clearInterval(timer); 
    } 
  }, 1000); 
} 
<div class="colockbox" id="colockbox1"> 
  <span class="day">00</span> 
  <span class="hour">00</span> 
  <span class="minute">00</span> 
  <span class="second">00</span> 
</div>

一.代码注释:

（1）.$(function(){}）,当文档结构完全加载完毕再去执行函数中的代码。

（2）.countDown("2016/2/3 6:30:59","#colockbox1")，调用函数，第一个参数是到期的时间，第二个是div的id属性值。

（3）.function countDown(time,id){}，声明此函数。

（4）.var day_elem=$(id).find('.day')，获取div下class属性值为day的对象。

（5）.var hour_elem=$(id).find('.hour')，获取div下class属性值为hour的对象。

（6）.var minute_elem=$(id).find('.minute')，获取div下class属性值为minute的对象。

（7）.var second_elem=$(id).find('.second')，获取div下class属性值为second的对象。

（8）.var end_time=new Date(time).getTime()，获取到期事件的时间戳。

（9）.var sys_second=(end_time-new Date().getTime())/1000，获取到期时间和当前时间相差的秒数。

（10）.var timer=setInterval(function(){}，1000），每隔一秒执行一次函数。

（11）.if(sys_second>1) ，如果相差的秒大于1。

（12）.sys_second-=1，秒减一。

（13）.var day=Math.floor((sys_second/3600)/24)，获取相差的天数。

（14）.var hour=Math.floor((sys_second/3600)%24)，获取相差的小时数，注意后面是取模运算。

（15）.var minute=Math.floor((sys_second/60)%60)，获取相差的分钟数。

（16）.var second=Math.floor(sys_second%60)，获取相差的秒数。

（17）.$(day_elem).text(day)，将天写入span元素。

（18）.$(hour_elem).text(hour<10?"0"+hour:hour)，将小时写入span，如果小时数小于10，前面加0，后面同样的道理。

（19）.clearInterval(timer)，如果相差的秒数到0，就停止计时器函数setInterval的执行。