JavaScript圖文詳細教程之超酷時鐘背景特效_javascript

　　炫酷的鬧鐘背景怎么改才比較好？很簡單，利用JavaScript就能改，并且做出的特效常常會讓我們驚艷。我們經常會在頁面中添加一些JavaScript代碼用來顯示時間，但是有時加入一些代碼可能會影響頁面的布局。現在給你一段代碼，它將給你生成一個跳動的時鐘，而且時鐘是疊加在背景上的，再也不用擔心布局上的問題了。

JavaScript教程之超酷時鐘背景特效

　　一、把下面的代碼加到《head》《/head》區域中：

<!--//

　　function clockon() {
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("clockon()"，200)
}

　　//-->
</script>

　　二、在《body》《/body》直接加入如下代碼：

　　<div id="bgclockshade" style="position:absolute;visibility:visible;font-family:Arial;color:FF8888;font-size:120px;top:102px;left:152px"></div><BR><BR>　　<div id="bgclocknoshade" style="position:absolute;visibility:visible;font-family:Arial;color:DDDDDD;font-size:120px;top:100px;left:150px"></div><BR><BR>　　<BR><div id="mainbody" style="position:absolute; visibility:visible"><BR></div><BR>

　　注：“font-size:120px”是用來設置字體的大小，color:FF8888是用來設置字體顏色的。

　　三、最后把《body》中內容改為：

　　《body bgcolor=“#ffffff” onLoad=“clockon（）”》

　　注：《body bgcolor=“#ffffff” onLoad=“clockon（）”》中的“#ffffff” 是網頁的背景顏色代碼，可以自行修改。

　　提醒：該效果所顯示的時鐘是利用層來定位的，所以你可在Dreamweaver中移動時鐘的位置；另外，時鐘具有陰影效果，這些都是可以自行修改的。如果大家有什么疑問可以跟我們交流。