基于JS代碼實現(xiàn)實時顯示系統(tǒng)時間

更新時間：2016年06月16日 15:31:13 作者：柯南&

這篇文章主要介紹了基于JS代碼實現(xiàn)實時顯示系統(tǒng)時間的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下

1.概述

在瀏覽很多網(wǎng)站時，都會發(fā)現(xiàn)在網(wǎng)站中加入了顯示當前系統(tǒng)時間的功能，在網(wǎng)頁中顯示當前系統(tǒng)時間，不僅可以方便瀏覽者掌握當前時間，而且還美化了網(wǎng)頁。

2.技術(shù)要點

利用Date對象來實現(xiàn)。首先創(chuàng)建一個表示當前系統(tǒng)時間的Date()對象，然后通過Date對象的getXxx()方法獲得當前系統(tǒng)時間的年、月、日、小時、分、秒和星期的值，接下來將獲得的這些值組合成一個日期時間字符串，并將日期時間字符串設(shè)置成為<div>標簽的內(nèi)容，最后通過window對象的setTimeout()函數(shù)每隔1秒調(diào)用一個實時顯示系統(tǒng)時間的函數(shù)。

3.具體實現(xiàn)

（1）新建index.jsp頁，編寫實時顯示系統(tǒng)時間的JavaScript函數(shù)，關(guān)鍵代碼如下：

/**
*實時顯示系統(tǒng)時間
*/
function getLangDate(){
var dateObj = new Date(); //表示當前系統(tǒng)時間的Date對象 
var year = dateObj.getFullYear(); //當前系統(tǒng)時間的完整年份值
var month = dateObj.getMonth()+1; //當前系統(tǒng)時間的月份值 
var date = dateObj.getDate(); //當前系統(tǒng)時間的月份中的日
var day = dateObj.getDay(); //當前系統(tǒng)時間中的星期值
var weeks = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
var week = weeks[day]; //根據(jù)星期值，從數(shù)組中獲取對應的星期字符串 
var hour = dateObj.getHours(); //當前系統(tǒng)時間的小時值 
var minute = dateObj.getMinutes(); //當前系統(tǒng)時間的分鐘值
var second = dateObj.getSeconds(); //當前系統(tǒng)時間的秒鐘值
//如果月、日、小時、分、秒的值小于10，在前面補0
if(month<10){
month = "0"+month;
}
if(date<10){
date = "0"+date;
}
if(hour<10){
hour = "0"+hour;
}
if(minute<10){
minute = "0"+minute;
}
if(second<10){
second = "0"+second;
}
var newDate = year+"年"+month+"月"+date+"日 "+week+" "+hour+":"+minute+":"+second;
document.getElementById("dateStr").innerHTML = "系統(tǒng)公告：[ "+newDate+" ]";
setTimeout("getLangDate()",1000);//每隔1秒重新調(diào)用一次該函數(shù) 
}

（2）在頁面<body>標簽中通過onload事件加載步驟（1）中編寫的JavaScript函數(shù)，并在頁面的適當位置加入<div>標簽，id為“dateStr“，關(guān)鍵代碼如下：

<body onLoad="getLangDate()">
<div id="dateStr" class="word_grey"></div>
</body>

在實現(xiàn)實時顯示系統(tǒng)時間時，還可以使用window對象的setIntervar()方法，setInterval()方法類似于setTimeout()方法。

不同之處是調(diào)用window對象的setIntervar()方法后，會一直執(zhí)行setIntervar()方法所調(diào)用的JavaScript方法，而setTimeout()方法只能被執(zhí)行一次。如果要通過setTimeout()方法一直執(zhí)行某個JavaScript方法，setTimeout()必須寫在被調(diào)用的JavaScript方法體內(nèi)。

以上所述是小編給大家介紹的基于JS代碼實現(xiàn)實時顯示系統(tǒng)時間的相關(guān)知識，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: