分享javascript計算時間差的範例程式碼_javascript技巧
- WBOY原創
- 2016-05-16 15:20:221470瀏覽
在實際應用中，需要計算兩個時間點之間的差距，一般來說都是計算當前時間和一個指定時間點之間的差距，並且有時需要精確到天、小時、分鐘和秒，以下就簡單介紹如何實現此效果。
效果圖：
距離新年：
程式碼如下:
<html>
<head>
<title>javascript计算时间差</title>
<style type="text/css">
#thenceThen
{
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("thenceThen").innerHTML=days+"天"+hours+"小时"+mins+"分钟"+secs+"秒";
}
else if(hours==0&&mins==0)
{
document.getElementById("thenceThen").innerHTML=secs+"秒";
}
else if(hours==0&&mins!= 0)
{
document.getElementById("thenceThen").innerHTML=mins+"分钟"+secs+"秒";
}
else if (hours!=0)
{
document.getElementById("thenceThen").innerHTML=hours+"小时"+mins+"分钟"+secs+"秒";
}
}
var clock;
window.onload=function()
{
clock=setInterval("thenceThen()",500);
}
</script>
</head>
<body>
<div id="thenceThen"></div>
</body>
</html>
以上程式碼實現了我們想要的功能，以下簡單介紹一下此效果的實作過程。
一.實現原理:
原理非常的簡單，就是計算連個時間點之間的毫秒差距，然後經過數學運算得出對應的天、小時、分鐘和描述，透過setInterval()函數每秒調用一次函數，那麼就是先了倒數效果。
二.程式碼註解:
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)，計算相差的小時數。
以上就是javascript計算時間差的範例程式碼，希望對大家的學習有所幫助。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn