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