成都网站建设|域名注册|虚拟主机|网站制作|网站案例|网站优化|网站推广|企业邮局|服务器租用|广告设计
我们经常会在页面中添加一些JavaScript代码用来显示时间。但是有时加入一些代码可能会影响页面的布局。现在给你一段代码，它将给你生成一个跳动的时钟，而且时钟是叠加在背景上的，再也不用担心布局上的问题了。 一、把下面的代码加到<head></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>
二、在<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中移动时钟的位置；另外，时钟具有阴影效果，这些都是可以自行修改的。如果大家有什么疑问可以跟我们交流。
更新时间：2010-12-19
