基于JS代碼實(shí)現(xiàn)實(shí)時(shí)顯示系統(tǒng)時(shí)間
1.概述
在瀏覽很多網(wǎng)站時(shí)，都會發(fā)現(xiàn)在網(wǎng)站中加入了顯示當(dāng)前系統(tǒng)時(shí)間的功能，在網(wǎng)頁中顯示當(dāng)前系統(tǒng)時(shí)間，不僅可以方便瀏覽者掌握當(dāng)前時(shí)間，而且還美化了網(wǎng)頁。
2.技術(shù)要點(diǎn)
利用Date對象來實(shí)現(xiàn)。首先創(chuàng)建一個(gè)表示當(dāng)前系統(tǒng)時(shí)間的Date()對象，然后通過Date對象的getXxx()方法獲得當(dāng)前系統(tǒng)時(shí)間的年、月、日、小時(shí)、分、秒和星期的值，接下來將獲得的這些值組合成一個(gè)日期時(shí)間字符串，并將日期時(shí)間字符串設(shè)置成為<div>標(biāo)簽的內(nèi)容，最后通過window對象的setTimeout()函數(shù)每隔1秒調(diào)用一個(gè)實(shí)時(shí)顯示系統(tǒng)時(shí)間的函數(shù)。
3.具體實(shí)現(xiàn)
（1）新建index.jsp頁，編寫實(shí)時(shí)顯示系統(tǒng)時(shí)間的JavaScript函數(shù)，關(guān)鍵代碼如下：
/**
*實(shí)時(shí)顯示系統(tǒng)時(shí)間
*/
function getLangDate(){
var dateObj = new Date(); //表示當(dāng)前系統(tǒng)時(shí)間的Date對象
var year = dateObj.getFullYear(); //當(dāng)前系統(tǒng)時(shí)間的完整年份值
var month = dateObj.getMonth()+1; //當(dāng)前系統(tǒng)時(shí)間的月份值
var date = dateObj.getDate(); //當(dāng)前系統(tǒng)時(shí)間的月份中的日
var day = dateObj.getDay(); //當(dāng)前系統(tǒng)時(shí)間中的星期值
var weeks = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
var week = weeks[day]; //根據(jù)星期值，從數(shù)組中獲取對應(yīng)的星期字符串
var hour = dateObj.getHours(); //當(dāng)前系統(tǒng)時(shí)間的小時(shí)值
var minute = dateObj.getMinutes(); //當(dāng)前系統(tǒng)時(shí)間的分鐘值
var second = dateObj.getSeconds(); //當(dāng)前系統(tǒng)時(shí)間的秒鐘值
//如果月、日、小時(shí)、分、秒的值小于10，在前面補(bǔ)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>標(biāo)簽中通過onload事件加載步驟（1）中編寫的JavaScript函數(shù)，并在頁面的適當(dāng)位置加入<div>標(biāo)簽，id為“dateStr“，關(guān)鍵代碼如下：
<body onLoad="getLangDate()"> <div id="dateStr" class="word_grey"></div> </body>
在實(shí)現(xiàn)實(shí)時(shí)顯示系統(tǒng)時(shí)間時(shí)，還可以使用window對象的setIntervar()方法，setInterval()方法類似于setTimeout()方法。
不同之處是調(diào)用window對象的setIntervar()方法后，會一直執(zhí)行setIntervar()方法所調(diào)用的JavaScript方法，而setTimeout()方法只能被執(zhí)行一次。如果要通過setTimeout()方法一直執(zhí)行某個(gè)JavaScript方法，setTimeout()必須寫在被調(diào)用的JavaScript方法體內(nèi)。
以上所述是小編給大家介紹的基于JS代碼實(shí)現(xiàn)實(shí)時(shí)顯示系統(tǒng)時(shí)間的相關(guān)知識，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
- js實(shí)時(shí)獲取并顯示當(dāng)前時(shí)間的方法
- jsp實(shí)現(xiàn)頁面實(shí)時(shí)顯示當(dāng)前系統(tǒng)時(shí)間的方法
- 比較簡潔的JavaScript 實(shí)時(shí)顯示時(shí)間的腳本 修正版
- javascript實(shí)時(shí)顯示北京時(shí)間的方法
- 詳解js實(shí)時(shí)獲取并顯示當(dāng)前時(shí)間的方法
- js實(shí)時(shí)獲取系統(tǒng)當(dāng)前時(shí)間實(shí)例代碼
- 頁面實(shí)時(shí)更新時(shí)間的JS實(shí)例代碼
- 判斷Session的過期時(shí)間 采用JavaScript實(shí)時(shí)顯示剩余多少秒
- JS使用Date對象實(shí)時(shí)顯示當(dāng)前系統(tǒng)時(shí)間簡單示例
- 使用Javascript在HTML中顯示實(shí)時(shí)時(shí)間
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Bootstrap按鈕組的簡單實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
javascript自然分類法算法實(shí)現(xiàn)代碼
這篇文章介紹了javascript自然分類法算法實(shí)現(xiàn)代碼，有需要的朋友可以參考一下2013-10-10
這篇文章主要給大家介紹了關(guān)于JavaScript在web自動化測試中的作用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
所有瀏覽器都支持該功能IE瀏覽器不能低于IE10.整個(gè)CORS通信過程都是瀏覽器自動完成不需要用戶參與。對于開發(fā)者來說CORS通信與同源的AJAX通信沒有差別代碼完全一樣瀏覽器一旦發(fā)現(xiàn)AJAX請求跨源就會自動添加一些附加的頭信息有時(shí)還會多出一次附加的請求，但用戶不會有感覺。2016-04-04
uni-file-picker文件選擇上傳功能實(shí)現(xiàn)
這篇文章主要介紹了uni-file-picker文件選擇上傳,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-07-07
手風(fēng)琴效果的導(dǎo)航想必大家都有見到過吧，實(shí)現(xiàn)的方法也有很多，在本文為大家介紹下使用原生js簡單實(shí)現(xiàn)下，感興趣的朋友不要錯(cuò)過2013-11-11
javascript 點(diǎn)擊整頁變灰的效果（可做退出效果）。
2008-01-01
JavaScript 實(shí)現(xiàn)普通數(shù)組數(shù)據(jù)轉(zhuǎn)化為樹形數(shù)據(jù)結(jié)構(gòu)的步驟說明
JavaScript之IE的fireEvent方法詳細(xì)解析