JavaScript計算時間差詳解

admin發表於2017-10-31
JavaScript

實際應用中，需要計算兩個時間點之間的差，很多時候需要精確到天、小時、分鐘和秒。

下面通過程式碼例項簡單介紹一下如何實現此效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">  
#ant{
  font-size:2em;
}  
</style>  
<script type="text/javascript">  
function thenceThen() {  
  var theTime="2014/5/4" 
  var endTime=new Date(theTime);  
  var totalSecs=(endTime-new Date())/1000;  
  var days=Math.floor(totalSecs/3600/24);  
  var hours=Math.floor((totalSecs-days*24*3600)/3600);  
  var mins=Math.floor((totalSecs-days*24*3600-hours*3600)/60);  
  var secs=Math.floor((totalSecs-days*24*3600-hours*3600-mins*60));  
  if(days!=0)  {  
    document.getElementById("ant").innerHTML=days+"天"+hours+"小時"+mins+"分鐘"+secs+"秒";  
  } 
  else if(hours==0&&mins==0)  {  
    document.getElementById("ant").innerHTML = secs + "秒";
  } 
  else if(hours==0&&mins!= 0)  {  
    document.getElementById("ant").innerHTML = mins + "分鐘" + secs + "秒";
  } 
  else if (hours!=0)  {  
    document.getElementById("ant").innerHTML = hours + "小時" + mins + "分鐘" + secs + "秒";
  }  
}  
var clock;  
window.onload=function() {  
  clock=setInterval("thenceThen()",500);  
}  
</script>  
</head>  
<body>  
<div id="ant"></div>  
</body>  
</html>

一.程式碼註釋:

（1）.function thenceThen(){}，此函式用來計算時間差距。

（2）.var theTime="2014/5/4"，此變數用來定義要計算時間差的一個時間點。

（3）.var endTime=new Date(theTime)，建立當前時間物件。

（4）.var totalSecs=(endTime-new Date())/1000，兩個時間物件的差是兩者之間的毫秒差距，再除以1000就是相差的描述。

（5）.var days=Math.floor(totalSecs/3600/24)，計算相差的天數，特別注意Math.floor()函式的作用，可以參看相關閱讀。

（6）.var hours=Math.floor((totalSecs-days*24*3600)/3600)，計算相差的小時數。

二.相關閱讀:

（1）.Date()建構函式的引數參閱JavaScript Date()建構函式引數一章節。

（2）. Math.floor()函式參閱javascript Math.floor()一章節。

（3）.innerHTML屬性參閱js innerHTML屬性的用法一章節。

相關文章