js簡單實現倒計時的方法

1、使用定時器setInterval

dateHandle(end){
      // 使用定時器，每秒執行獲取時間，執行一次函數
      let setInt=setInterval(() => {
        let nowTime=Date.parse(new Date())//現在時間
        let endTime=Date.parse(end)//活動結束時間
        let changeTime=endTime-nowTime;//時間戳差值
        // 所剩天數換算
        let day=parseInt(changeTime/1000/60/60/24)>0?parseInt(changeTime/1000/60/60/24)+'天':''
        // 所剩小時換算，不足10時，前面補0
        let hour=parseInt(changeTime/1000/60/60%24)>9?parseInt(changeTime/1000/60/60%24)+'小時':'0'+parseInt(changeTime/1000/60/60%24)+'小時'
        // 所剩分鍾換算，不足10時，前面補0
        let min=parseInt(changeTime/1000/60%60)>9?parseInt(changeTime/1000/60%60)+'分鍾':'0'+parseInt(changeTime/1000/60%60)+'分鍾'
        // 所剩秒數換算，不足10時，前面補0
        let sec=parseInt(changeTime/1000%60)>9?parseInt(changeTime/1000%60)+'秒':'0'+parseInt(changeTime/1000%60)+'秒'
        if(changeTime<=0){
          // 如果差值小於0，代表活動已結束，清空定時器
          clearInterval(setInt)
          this.time='00天00小時00分鍾00秒'
        }else{
          // 如活動未結束，賦值所剩時間
          this.time=day+hour+min+sec;
        }
      }, 1000); 
    },

附截圖：

 

 2、使用setTimeOut

    // 調用倒計時方法，傳入截止日期
    dateHandle(end){
        let nowTime=Date.parse(new Date())//現在時間
        let endTime=Date.parse(end)//截止時間
        let changeTime=endTime-nowTime;//時間戳差值
        if(changeTime<=0){
          // 判斷如果差值小於0，直接賦值距截止時間為0，並return
          this.time='00天00小時00分鍾00秒';
          return 
        }
        // 所剩天數換算
        let day=parseInt(changeTime/1000/60/60/24)>0?parseInt(changeTime/1000/60/60/24)+'天':''
        // 所剩小時換算，不足10時，前面補0
        let hour=parseInt(changeTime/1000/60/60%24)>9?parseInt(changeTime/1000/60/60%24)+'小時':'0'+parseInt(changeTime/1000/60/60%24)+'小時'
        // 所剩分鍾換算，不足10時，前面補0
        let min=parseInt(changeTime/1000/60%60)>9?parseInt(changeTime/1000/60%60)+'分鍾':'0'+parseInt(changeTime/1000/60%60)+'分鍾'
        // 所剩秒數換算，不足10時，前面補0
        let sec=parseInt(changeTime/1000%60)>9?parseInt(changeTime/1000%60)+'秒':'0'+parseInt(changeTime/1000%60)+'秒'
        console.log(changeTime)
        this.time=day+hour+min+sec;
        // 使用setTimeout每隔1s再次調用一次函數
        let setTime=setTimeout(() => {
          if(changeTime<=0){
            // 判斷如果活動結束，清空setTimeout，並return，不再向下執行
            clearTimeout(setTime)
            this.time='00天00小時00分鍾00秒';
            return
          }else{
            // 如未結束則繼續調用函數，並傳入截止時間
            this.dateHandle('2020-4-24 16:40:00')
          }
        }, 1000);    
    },

附截圖：