當(dāng)前位置：軟件學(xué)堂 > 資訊首頁 > 網(wǎng)絡(luò)編程 > 編程其他 > 通過JS代碼制作背景時(shí)鐘效果

通過JS代碼制作背景時(shí)鐘效果

2012/11/5 16:46:44作者：佚名來源：網(wǎng)絡(luò)

移動(dòng)端

【實(shí)例名稱】

通過JS代碼制作背景時(shí)鐘效果

【實(shí)例描述】

在頁面上顯示時(shí)間是網(wǎng)站常見的特效：本例介紹如何在頁面的背景上顯示時(shí)鐘，以增加頁面的三維效果。

【實(shí)例代碼】

<html>
<head>
<TITLE>背景時(shí)鐘-學(xué)無憂（m.wangbatian.cn）</title> 
<script language=javaScript>
function clockView() 
{
thistime= new Date(); //獲取時(shí)間
//分別獲取當(dāng)前時(shí)間的小時(shí)、分和秒。
var hours=thistime.getHours();
var minutes=thistime.getMinutes();
var seconds=thistime.getSeconds();
//設(shè)置時(shí)間的顯示格式
if (eval(hours) <10) {hours="0"+hours;}
if (eval(minutes) < 10) {minutes="0"+minutes;}
if (seconds < 10) {seconds="0"+seconds;}
//得到最終應(yīng)該顯示的時(shí)間
thistime = hours+":"+minutes+":"+seconds;
//根據(jù)瀏覽器的不同設(shè)置
if(document.all) {
bgclocknoshade.innerHTML=thistime;
bgclockshade.innerHTML=thistime;
}
if(document.layers) {
document.bgclockshade.document.write('<div id="bgclockshade" style="position:absolute;visibility:visible;font-family:Verdana;color:FFAAAAA;font-size:120px;top:10px;left:152px">'+thistime+'</div>');
document.bgclocknoshade.document.write('<div id="bgclocknoshade" style="position:absolute;visibility:visible;font-family:Verdana;color:DDDDDD;font-size:120px;top:10px;left:150px">'+thistime+'</div>');
document.close();
}
var timer=setTimeout("clockView()",1000);
}
</script>
  需要在body中添加三個(gè)div，代碼如下所示：
</head>
<body onLoad="clockView()">
<div id="bgclockshade" style="position:absolute;visibility:visible;font-family:Arial;color:FF8888;font-size:120px;top:102px;left:152px"></div>
<div id="bgclocknoshade" style="position:absolute;visibility:visible;font-family:Arial;color:dffdff;font-size:120px;top:100px;left:150px"></div>
<div id="mainbody" style="position:absolute; visibility:visible">
</div>
</body>
</html>

【運(yùn)行效果】

 背景時(shí)鐘運(yùn)行效果

【難點(diǎn)剖析】

本例的難點(diǎn)有兩個(gè)：時(shí)間的獲取與變化、三維樣式顯示。獲取時(shí)間時(shí)，考慮到顯示的美觀性，需要在個(gè)位數(shù)的時(shí)間前加“o”，以轉(zhuǎn)化成兩位數(shù)的表示形式。因?yàn)闀r(shí)間是變化的，所以需要使用“setTimeout”定時(shí)器循環(huán)顯示時(shí)間，注意定時(shí)器的定時(shí)單位設(shè)置為1000毫秒．正好等于一秒。三維樣式主要依賴于css的定義，可參考代碼中的div樣式設(shè)置。

【源碼下載】

為了JS代碼的準(zhǔn)確性，請(qǐng)點(diǎn)擊：背景時(shí)鐘 進(jìn)行本實(shí)例源碼下載 

標(biāo)簽： JS代碼  背景  效果