當前位置：軟件學堂 > 資訊首頁 > 網絡編程 > 編程其他 > 通過JS代碼制作背景時鐘效果

通過JS代碼制作背景時鐘效果

2012/11/5 16:46:44作者：佚名來源：網絡

移動端

【實例名稱】

通過JS代碼制作背景時鐘效果

【實例描述】

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

【實例代碼】

<html>
<head>
<TITLE>背景時鐘-學無憂（www.yzddtk.cn）</title> 
<script language=javaScript>
function clockView() 
{
thistime= new Date(); //獲取時間
//分別獲取當前時間的小時、分和秒。
var hours=thistime.getHours();
var minutes=thistime.getMinutes();
var seconds=thistime.getSeconds();
//設置時間的顯示格式
if (eval(hours) <10) {hours="0"+hours;}
if (eval(minutes) < 10) {minutes="0"+minutes;}
if (seconds < 10) {seconds="0"+seconds;}
//得到最終應該顯示的時間
thistime = hours+":"+minutes+":"+seconds;
//根據瀏覽器的不同設置
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中添加三個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>

【運行效果】

背景時鐘運行效果

【難點剖析】

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

【源碼下載】

為了JS代碼的準確性，請點擊：背景時鐘進行本實例源碼下載

標簽：背景

上一篇：JS代碼實現倒計時顯示
下一篇：利用JS計算某天是星期幾

相關文章

熱門軟件/ 推薦游戲/ 手機軟件

資訊分類

Dreamweaver Flash DIV+CSS 編程其他

推薦教程

精品軟件推薦

360安全衛士

訊飛輸入法

欧美一级一极性活片免费观看,欧美一级艳片欧美精品,欧美一级性爱大片,欧美一级囗交视频视频,欧美一级特黄录像视频