jQuery精確到毫秒倒數計時詳解

admin發表於2018-12-07
jQuery

大家通常看到的倒數計時效果，一般都是精確到秒的，類似於體育課上的那種精確到毫秒的秒錶效果還是比較少見的，下面就通過程式碼例項介紹一下如何實現一個倒數計時能夠精確到毫秒。

程式碼例項如下: 

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title>  
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript">    
$(document).ready(function(){    
  setInterval(function(){         
    $(".time_wrap").each(function(){    
      var Obj = this;        
      var EndTime = new Date(parseInt($(Obj).attr('value')) * 1000);    
      var NowTime = new Date();    
      var nMS=EndTime.getTime() - NowTime.getTime();    
      var nD=Math.floor(nMS/(1000 * 60 * 60 * 24));    
      var nH=Math.floor(nMS/(1000*60*60)) % 24;    
      var nM=Math.floor(nMS/(1000*60)) % 60;    
      var nS=Math.floor(nMS/1000) % 60;    
      var nMS=Math.floor(nMS/100) % 10;    
      if(nD>= 0){         
        var str = '<span class="timer" >'+nD+'天'+nH+'小時'+nM+'分'+nS+'.'+nMS+'秒';    
        $(Obj).html(str);    
      }         
    });    
  }, 100);
}); 
</script>
</head> 
<body> 
<span class="time_wrap" value="13971451820" style="line-height:200%;"></span>
</body> 
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.$(document).ready(function(){})，當文件結構完全載入完畢再去執行函式中的程式碼。

（2）.setInterval(function(){},100)，定時器函式每隔100毫秒呼叫一次函式，這個很重要，100毫秒時間間隔很重要，這樣可以讓倒數計時精確到秒的下一個單位，當然其實也不是毫秒，如果真的要是以毫秒間隔的話，那麼間隔時間就1。

（3）.$(".time_wrap").each(function(){})，獲取並遍歷class屬性值為time_wrap元素。

（4）.var Obj = this，將當前物件的this引用賦值給變數Obj。

（5）.var EndTime = new Date(parseInt($(Obj).attr('value')) * 1000)，$(Obj).attr('value')獲取元素的value屬性值，這個屬性值是秒，所以這裡將其轉換為毫秒，然後生成一個時間物件，這個時間物件表示的具體時間就是倒數計時的目標時間點。

（6）.var NowTime = new Date()，獲取當前時間物件。

（7）.var nMS=EndTime.getTime() - NowTime.getTime()，獲取時間戳的之差。

（8）.var nD=Math.floor(nMS/(1000 * 60 * 60 * 24))，獲取天數，這個Math.floor()函式是進行下舍入操作，也很重要，因為在計算的時候很可能會有"零頭"，那麼這個零頭就捨去。

（9）.var nH=Math.floor(nMS/(1000*60*60)) % 24，獲取倒數計時的小時數,這裡的技巧也很重要，nMS/(1000*60*60)這個可以獲取終點時間和當前時間相差小時數，然後使用Math.floor()函式進行下舍入，最後與24求餘，這個餘數就是倒數計時的小時。

（10）.if(nD>= 0){         

  var str = '<span class="timer" >'+nD+'天'+nH+'小時'+nM+'分'+nS+'.'+nMS+'秒';    

  $(Obj).html(str);    

}

如果nd大於等於，則顯示倒數計時，否則不顯示。

二.相關閱讀:

（1）.setInterval()參閱setInterval()用法一章節。

（2）.each()參閱jQuery的each()方法一章節。

（3）.Date()參閱JavaScript中Date()建構函式一章節。  

（4）.attr()參閱jQuery attr()一章節。 

（5）.getTime()參閱JavaScript getTime()一章節。 

（6）.Math.floor()參閱JavaScript Math.floor()一章節。 

相關文章