基于JS代碼實(shí)現(xiàn)實(shí)時(shí)顯示系統(tǒng)時(shí)間
1.概述
在瀏覽很多網(wǎng)站時(shí),都會(huì)發(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對(duì)象來實(shí)現(xiàn)。首先創(chuàng)建一個(gè)表示當(dāng)前系統(tǒng)時(shí)間的Date()對(duì)象,然后通過Date對(duì)象的getXxx()方法獲得當(dāng)前系統(tǒng)時(shí)間的年、月、日、小時(shí)、分、秒和星期的值,接下來將獲得的這些值組合成一個(gè)日期時(shí)間字符串,并將日期時(shí)間字符串設(shè)置成為<div>標(biāo)簽的內(nèi)容,最后通過window對(duì)象的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對(duì)象 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ù)組中獲取對(duì)應(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對(duì)象的setIntervar()方法,setInterval()方法類似于setTimeout()方法。
不同之處是調(diào)用window對(duì)象的setIntervar()方法后,會(huì)一直執(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í),希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(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對(duì)象實(shí)時(shí)顯示當(dāng)前系統(tǒng)時(shí)間簡單示例
- 使用Javascript在HTML中顯示實(shí)時(shí)時(shí)間
相關(guān)文章
javascript制作坦克大戰(zhàn)全紀(jì)錄(1)
本文寫作的目的是鞏固一下自己最近學(xué)習(xí)的js知識(shí), 這個(gè)教程適合熟悉js基本語法和面向?qū)ο笳Z法的小伙伴學(xué)習(xí)。由于自己也是剛學(xué)js不久,所以難免出現(xiàn)錯(cuò)誤。如果發(fā)現(xiàn)希望給予指正。2014-11-11JavaScript文本特效實(shí)例小結(jié)【3個(gè)示例】
這篇文章主要介紹了JavaScript文本特效,結(jié)合3個(gè)實(shí)例分析了javascript基于定時(shí)器的文字動(dòng)態(tài)操作特效相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-12-12javascript中的undefined 與 null 的區(qū)別 補(bǔ)充篇
在Javascript中有兩個(gè)值用來代表類似空值的概念,undefined和null,這兩個(gè)很容易被混淆,他們表示的是兩個(gè)不同的概念。2010-03-03小程序封裝wx.request請(qǐng)求并創(chuàng)建接口管理文件的實(shí)現(xiàn)
這篇文章主要介紹了小程序封裝wx.request請(qǐng)求并創(chuàng)建接口管理文件2019-04-04JavaScript中windows.open()、windows.close()方法詳解
這篇文章主要介紹了JavaScript中windows.open()、windows.close()方法詳解 的相關(guān)資料,需要的朋友可以參考下2016-07-07環(huán)形加載進(jìn)度條封裝(Vue插件版和原生js版)
這篇文章主要為大家詳細(xì)介紹了環(huán)形加載進(jìn)度條封裝,Vue插件版,原生js版,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-12-12JavaScript & jQuery完美判斷圖片是否加載完畢
本文主要介紹了JavaScript & jQuery完美判斷圖片是否加載完畢的方法。具有一定的參考價(jià)值,下面跟著小編一起來看下吧2017-01-01