首頁 > web前端 > js教程 > 原生javascript實作自動更新的時間日期_javascript技巧

原生javascript實作自動更新的時間日期_javascript技巧

WBOY
發布: 2016-05-16 15:15:46
原創
1561 人瀏覽過

能夠動態變化的事物總比靜態的更能夠吸引人,甚至更有實用效果,比如能夠自動變化的時間日期效果就是如此,下面就透過程式碼實例介紹一下如何實現此效果,程式碼實例如下:
一、具體代碼

<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="当前时间:"+y+"年"+h+"时"+m+"分"+s+"秒";
 t = setTimeout(time,1000);    
} 
window.onload=function(){time()}
</script>
</head>
<body>
<div id="timeShow"></div>
</body>
</html>
登入後複製

以上程式碼實現了我們的要求,以下簡單介紹一下實作過程。
二、實現原理
time()函數
能夠取得目前時間日期,然後在函數最後使用定時器函數遞歸呼叫time()函數,也就是能夠不斷執行time()函數,於是也就實現了時間日期自動更新的經過,這裡就不多介紹了。

三、相關資訊補充

javascript時間函數

javascript提供了Date物件來進行時間和日期的計算。 Date物件有多種建構子:

1、dateObj=new Date() //當前時間

2、dateObj=new Date(milliseconds) //距離起始時間1970年1月1日的毫秒數

3、dateObj=new Date(datestring) //字串代表的日期與時間。此字串可以使用Date.parse()轉換,例如"Jannuary 1, 1998 20:13:15"

4、dateObj=new Date(year, month, day, hours, minutes, seconds, microseconds) //時間數值,不用全部寫,不寫則預設為0

使用時呼叫物件函數,例如
year=dateObj.getFullYear();//取得年份值

以下是Date物件的函數列表,使用方法如上所示:

1)、取得類別函數:
getDate() 函數 -- 傳回天數(1-31)
getDay()函數 -- 傳回星期數(0-6)
getFullYear() 函數 -- 傳回四位數年份
getHours()函數 -- 傳回小時數(0-23)
getMilliseconds() 函數 -- 傳回毫秒數(0-999)
getMinutes() 函數 -- 傳回分鐘數(0-59)
getMonth() 函數 -- 傳回月份數(0-11)
getSeconds() 函數 -- 傳回的秒數(0-59)
getTime() 函數 -- 傳回時間戳表示法(毫秒錶示)
getYear() 函數 -- 傳回年份(真實年份減去1900)

2)、設定類別函數:
(以下函數皆傳回date物件距離1970年1月1日午夜之間的毫秒數)
setDate() 函數 -- 設定月份的一天
setFullYear() 函數 -- 設定的年份,月份和天
setHours() 函數 -- 設定小時,分鐘,秒和毫秒
setMilliseconds() 函數 -- 設定毫秒數
setMinutes() 函數 -- 設定分鐘,秒,毫秒
setMonth() 函數 -- 設定月份,天
setSeconds() 函數 -- 設定月份的一天
setTime() 函數 -- 使用毫秒數設定date物件
setYear() 函數 -- 設定年份(真實年份減去1900)

3)、轉換顯示類別函數:
toLocalString() 函數 -- 傳回本地化字串表示
toLocaleDateString函數 -- 傳回日期部分的本地化字串
toLocaleTimeString函數 -- 傳回時間部分的本地化字串

相對於local輸出,還有:

toString()
toDateString()
toTimeString()

差別在於前者是根據不同的機器有不同的當地語言格式,後者是內部表示格式

4)、日期解析類別函數

Date.parse() 函數 -- 解析一個日期的字串,並傳回該日期距1970年1月1日午夜之間的毫秒數

以上就是關於javascript時間日期的詳細內容,希望對大家的學習有所幫助。

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板