分享javascript計(jì)算時間差的示例代碼
在實(shí)際應(yīng)用中,需要計(jì)算兩個時間點(diǎn)之間的差距,一般來說都是計(jì)算當(dāng)前時間和一個指定時間點(diǎn)之間的差距,并且有時候需要精確到天、小時、分鐘和秒,下面就簡單介紹一下如何實(shí)現(xiàn)此效果。
效果圖:
距離新年:
代碼如下:
<html> <head> <title>javascript計(jì)算時間差</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>
以上代碼實(shí)現(xiàn)了我們想要的功能,下面簡單介紹一下此效果的實(shí)現(xiàn)過程。
一.實(shí)現(xiàn)原理:
原理非常的簡單,就是計(jì)算連個時間點(diǎn)之間的毫秒差距,然后經(jīng)過數(shù)學(xué)運(yùn)算得出相應(yīng)的天、小時、分鐘和描述,通過setInterval()函數(shù)每秒調(diào)用一次函數(shù),那么就是先了倒計(jì)效果。
二.代碼注釋:
1.function thenceThen(){},此函數(shù)用來計(jì)算時間差距。
2.var theTime="2014/5/4",此變量用來定義要計(jì)算時間差的一個時間點(diǎn)。
3.var endTime=new Date(theTime),創(chuàng)建當(dāng)前時間對象。
4.var totalSecs=(endTime-new Date())/1000,兩個時間對象的差是兩者之間的毫秒差距,再除以1000就是相差的描述。
5.var days=Math.floor(totalSecs/3600/24),計(jì)算相差的天數(shù),特別注意Math.floor()函數(shù)的作用,可以參看相關(guān)閱讀。
6.var hours=Math.floor((totalSecs-days*24*3600)/3600),計(jì)算相差的小時數(shù)。
以上就是javascript計(jì)算時間差的示例代碼,希望對大家的學(xué)習(xí)有所幫助。
- js實(shí)現(xiàn)時間顯示幾天前、幾小時前或者幾分鐘前的方法集錦
- js模仿微信朋友圈計(jì)算時間顯示幾天/幾小時/幾分鐘/幾秒之前
- JavaScript輸入分鐘、秒倒計(jì)時技巧總結(jié)(附代碼)
- js計(jì)算時間差代碼【包括計(jì)算,天,時,分,秒】
- JS 兩個字符串時間的天數(shù)差計(jì)算
- js計(jì)算時間過去的時間
- 自己寫的Javascript計(jì)算時間差函數(shù)
- JavaScript 網(wǎng)頁中實(shí)現(xiàn)一個計(jì)算當(dāng)年還剩多少時間的倒數(shù)計(jì)時程序
- Js利用console計(jì)算代碼運(yùn)行時間的方法示例
- JS計(jì)算距當(dāng)前時間的時間差實(shí)例
- JS計(jì)算兩個時間相差分鐘數(shù)的方法示例
相關(guān)文章
JavaScript使用localStorage判斷設(shè)置值是否過期
本文主要介紹了JavaScript使用localStorage判斷設(shè)置值是否過期,通過設(shè)置過期時間,我們可以使用 setItemWithExpiration 函數(shù)將數(shù)據(jù)存儲到 localStorage 中,并使用 getItemWithExpiration 函數(shù)獲取數(shù)據(jù)并檢查是否過期,感興趣的可以了解一下2023-05-05深入理解javascript prototype的相關(guān)知識
這篇文章主要介紹了深入理解javascript prototype的相關(guān)知識,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09原生js實(shí)現(xiàn)隨機(jī)點(diǎn)名功能
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)隨機(jī)點(diǎn)名功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-11-11JavaScript與Image加載事件(onload)、加載狀態(tài)(complete)
以前寫過一個圖片等比縮放的Js函數(shù),缺陷是要等到所有圖片都加載完畢了,才能進(jìn)行等比縮放。2011-02-02js 計(jì)數(shù)排序的實(shí)現(xiàn)示例(升級版)
這篇文章主要介紹了js 計(jì)數(shù)排序的實(shí)現(xiàn)示例(升級版),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01javascript陷阱 一不小心你就中招了(字符運(yùn)算)
看似簡單的加法運(yùn)行,卻有很多問題,一定要注意字符與數(shù)字的運(yùn)算,注意使用js的強(qiáng)制類型轉(zhuǎn)換,否則會出現(xiàn)很多問題。我們在編寫js的過程中,最好通過alert逐行測試2013-11-11DOM_window對象屬性之--clipboardData對象操作代碼
clipboardData 對象提供了對于預(yù)定義的剪貼板格式的訪問,以便在編輯操作中使用。2011-02-02