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

一.代码注释:

(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的执行。

你可能感兴趣的:(JS倒计时效果)