原生javascript實現(xiàn)自動更新的時間日期
能夠動態(tài)變化的事物總比靜態(tài)的更能夠吸引人,甚至更有實用效果,比如能夠自動變化的時間日期效果就是如此,下面就通過代碼實例介紹一下如何實現(xiàn)此效果,代碼實例如下:
一、具體代碼
<html> <head> <meta charset="gb2312"> <title>腳本之家</title> <script type="text/javascript"> var t = null; function time(){ dt = new Date(); var y=dt.getFullYear(); var h=dt.getHours(); var m=dt.getMinutes(); var s=dt.getSeconds(); document.getElementById("timeShow").innerHTML="當(dāng)前時間:"+y+"年"+h+"時"+m+"分"+s+"秒"; t = setTimeout(time,1000); } window.onload=function(){time()} </script> </head> <body> <div id="timeShow"></div> </body> </html>
以上代碼實現(xiàn)了我們的要求,下面簡單介紹一下實現(xiàn)過程。
二、實現(xiàn)原理
time()函數(shù)能夠獲取當(dāng)前時間日期,然后在函數(shù)最后使用定時器函數(shù)遞歸調(diào)用time()函數(shù),也就是能夠不斷執(zhí)行time()函數(shù),于是也就實現(xiàn)了時間日期自動更新的經(jīng)過,這里就不多介紹了。
三、相關(guān)信息補(bǔ)充
javascript時間函數(shù)
javascript提供了Date對象來進(jìn)行時間和日期的計算。Date對象有多種構(gòu)造函數(shù):
1、dateObj=new Date() //當(dāng)前時間
2、dateObj=new Date(milliseconds) //距離起始時間1970年1月1日的毫秒數(shù)
3、dateObj=new Date(datestring) //字符串代表的日期與時間。此字符串可以使用Date.parse()轉(zhuǎn)換,比如"Jannuary 1, 1998 20:13:15"
4、dateObj=new Date(year, month, day, hours, minutes, seconds, microseconds) //時間數(shù)值,可以不用全部寫,不寫則默認(rèn)為0
使用時調(diào)用對象函數(shù),比如
year=dateObj.getFullYear();//獲得年份值
下面是Date對象的函數(shù)列表,使用方法如上所示:
1)、獲取類函數(shù):
getDate() 函數(shù) -- 返回天數(shù)(1-31)
getDay()函數(shù) -- 返回星期數(shù)(0-6)
getFullYear() 函數(shù) -- 返回四位數(shù)年份
getHours()函數(shù) -- 返回小時數(shù)(0-23)
getMilliseconds() 函數(shù) -- 返回毫秒數(shù)(0-999)
getMinutes() 函數(shù) -- 返回分鐘數(shù)(0-59)
getMonth() 函數(shù) -- 返回月份數(shù)(0-11)
getSeconds() 函數(shù) -- 返回的秒數(shù)(0-59)
getTime() 函數(shù) -- 返回時間戳表示法(毫秒表示)
getYear() 函數(shù) -- 返回年份(真實年份減去1900)
2)、設(shè)置類函數(shù):
(以下函數(shù)均返回date對象距1970年1月1日午夜之間的毫秒數(shù))
setDate() 函數(shù) -- 設(shè)置月份的一天
setFullYear() 函數(shù) -- 設(shè)置的年份,月份和天
setHours() 函數(shù) -- 設(shè)置小時,分鐘,秒和毫秒
setMilliseconds() 函數(shù) -- 設(shè)置毫秒數(shù)
setMinutes() 函數(shù) -- 設(shè)置分鐘,秒,毫秒
setMonth() 函數(shù) -- 設(shè)置月份,天
setSeconds() 函數(shù) -- 設(shè)置月份的一天
setTime() 函數(shù) -- 使用毫秒數(shù)設(shè)置date對象
setYear() 函數(shù) -- 設(shè)置年份(真實年份減去1900)
3)、轉(zhuǎn)化顯示類函數(shù):
toLocalString() 函數(shù) -- 返回本地化字符串表示
toLocaleDateString函數(shù) -- 返回日期部分的本地化字符串
toLocaleTimeString函數(shù) -- 返回時間部分的本地化字符串
相對于local輸出,還有:
toString()
toDateString()
toTimeString()
區(qū)別在于前者是根據(jù)不同的機(jī)器有不同的當(dāng)?shù)卣Z言格式,后者是內(nèi)部表示格式
4)、日期解析類函數(shù)
Date.parse() 函數(shù) -- 解析一個日期的字符串,并返回該日期距1970年1月1日午夜之間的毫秒數(shù)
以上就是關(guān)于javascript時間日期的詳細(xì)內(nèi)容,希望對大家的學(xué)習(xí)有所幫助。
相關(guān)文章
bootstrap自定義樣式之bootstrap實現(xiàn)側(cè)邊導(dǎo)航欄功能
bootstrap自帶的響應(yīng)式導(dǎo)航欄是向下滑動的,有時滿足不了個性化的需求,需要做一個類似于android drawerLayout 側(cè)滑的菜單,這就是我要實現(xiàn)的bootstrap自定義側(cè)滑菜單。接下來通過本文給大家介紹bootstrap實現(xiàn)側(cè)邊導(dǎo)航欄功能,感興趣的朋友一起看看吧2018-09-09詳解JavaScript如何優(yōu)雅地實現(xiàn)創(chuàng)建多維數(shù)組
多維數(shù)組的意思是指三維或者三維以上的數(shù)組。這篇文章將通過示例為大家詳細(xì)講解一下JavaScript如何實現(xiàn)優(yōu)雅地創(chuàng)建多維數(shù)組,需要的可以參考一下2022-07-07javascript學(xué)習(xí)筆記之函數(shù)定義
本文主要給大家介紹了javascript的一些函數(shù)定義方面的基礎(chǔ)知識,包括函數(shù)聲明式、函數(shù)表達(dá)式、Function 構(gòu)造函數(shù)等,十分的簡單實用,有需要的小伙伴可以參考下。2015-06-06javascript中的__defineGetter__和__defineSetter__介紹
這篇文章主要介紹了javascript中的__defineGetter__和__defineSetter__介紹,類似面向?qū)ο笳Z言中的get和set關(guān)鍵字,需要的朋友可以參考下2014-08-08JavaScript模擬實現(xiàn)Promise功能的示例代碼
這篇文章主要為大家詳細(xì)介紹了JavaScript如何模擬實現(xiàn)Promise功能,文中的示例代碼講解詳細(xì),對我們學(xué)習(xí)JavaScript有一定的幫助,需要的可以參考一下2022-12-12解讀new?Object()和Object.create()的區(qū)別
這篇文章主要介紹了解讀new?Object()和Object.create()的區(qū)別及說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-02-02JS實現(xiàn)聯(lián)想、自動補(bǔ)齊國家或地區(qū)名稱的功能
這篇文章主要介紹了JS實現(xiàn)聯(lián)想、自動補(bǔ)齊國家或地區(qū)名稱的功能,文中示例代碼非常詳細(xì),幫助大家更好的理解和學(xué)習(xí),感興趣的朋友可以了解下2020-07-07JS實現(xiàn)可點(diǎn)擊展開與關(guān)閉的左側(cè)廣告代碼
這篇文章主要介紹了JS實現(xiàn)可點(diǎn)擊展開與關(guān)閉的左側(cè)廣告代碼,通過鼠標(biāo)onClick事件調(diào)用自定義javascript函數(shù)實現(xiàn)頁面元素及樣式的顯示與隱藏效果,非常簡單實用,需要的朋友可以參考下2015-09-09