DIV CSS 佈局教程網

因為平常工作中很常用到該功能，所以就利用這次國慶假期，重新梳理與對原有代碼進行改善，再集成一個常用的功能，最終封裝出這個“簡單倒計時”功能。

該倒計時方法具有以下該功能：

1. 根據指定日期與當前的電腦時間進行匹配

2. 通過指定一個數組參數，來設置在每一天內不同的時間段進行倒計時。

* 該方法還未通過實際工作的檢測，穩定性未知（如果實際工作通過，會刪除這段話）

function countDown(date,target,filter){

  var setTime = new Date(date).getTime(),
    timer = null;

  function core(){
    var nowTime = new Date().getTime(),
      leftTime = 0,
      d = 0,h = 0,m = 0,s = 0;

    ////////////////////////////
    //conditation @ doublue time
    if(filter.length){
      setTime = new Date();
      for(var i=0,l=filter.length;i<l;i++){
        setTime.setHours(filter[i]);
        setTime.setMinutes(0);
        setTime.setSeconds(0);
        if(nowTime < setTime.getTime()){
          break;
        }else if(i == filter.length-1){
          setTime.setDate(setTime.getDate()+1);
          setTime.setHours(filter[0]);
        }
        
      }
    }
    ////////////////////////////

    leftTime = Math.ceil((setTime - nowTime)/1000);
    if(nowTime <= setTime){
      d = ~~(leftTime/86400);
      h = ~~(leftTime%86400/3600);
      m = ~~(leftTime%86400%3600/60);
      s = ~~(leftTime%86400%3600%60);
      timer = setTimeout(core,1e3);
    }else{
      clearTimeout(timer);
      timer = null;
    }

    //here set out format
    target.innerHTML = 'd:'+d+' h:'+h+' m:'+m+' s:'+s;
    
  }
  core();
}

調用方式：

// 普通調用
countDown('2016/10/02/23:43',oDiv);
// 指定時間循環倒計時
countDown('2016/10/02/23:43',oDiv,[9,11,18]);

以上這篇自己封裝的一個簡單的倒計時功能實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持。