Javascript脚本特效示例:[23]背景上加时钟
1、在桌机上新建文本文档,命名为晓博JavaScript特效测试.txt,在文本文档里中入HTML文档的基本元素如下,并保存。
<html>
<head>
<title>晓博JavaScript特效测试</title>
</head>
<body>
<div id="zy">
<div id="login"></div>
<div id="daohang">
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="jianjie.html">七夕简介</a></li>
<li><a href="#">七夕节传说</a></li>
<li><a href="#">七夕节习俗</a></li>
<li><a href="#">诗词& 歌谣</a></li>
<li><a href="#">七夕节寄语</a></li>
</ul>
</div>
</div>
</body>
</html>
![Javascript脚本特效示例:[23]背景上加时钟](https://exp-picture.cdn.bcebos.com/1f03436b04d14929e96a1aa763e5eceeacbc7e7a.jpg)
![Javascript脚本特效示例:[23]背景上加时钟](https://exp-picture.cdn.bcebos.com/3852f6e5eceeadbcc6cd64c4cd18dfdae53b7b7a.jpg)
2、第一步:把如下代码加入<head>区域中:
<script language=javaScript>
<!--// 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>
3、第二步:把如下代码加入<body>区域中,并重名文档为HTML文件
<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:DDDDDD;font-size:120px;top:100px;left:150px"></div>
<div id="mainbody" style="position:absolute; visibility:visible">
</div>
4、第三步:把<body>中内容改为:
<body bgcolor="#fef4d9" onLoad="clockon()">
5、用IE浏览器打开晓博JavaScript特效测试.html文件,可以看到时钟加在背景上特效如下图
![Javascript脚本特效示例:[23]背景上加时钟](https://exp-picture.cdn.bcebos.com/de9bfa3b3b86022130b5b0e2d8bbf82065fb727a.jpg)
![Javascript脚本特效示例:[23]背景上加时钟](https://exp-picture.cdn.bcebos.com/974a2f21056104a3dd0ba01a63d7592ae2ef6b7a.jpg)