站内搜索: 请输入搜索关键词

当前页面: 开发资料首页Javascript 专题JavaScript实例 创建超酷时钟背景特效

JavaScript实例 创建超酷时钟背景特效

摘要: JavaScript实例 创建超酷时钟背景特效
<textarea readonly style="border:none;font-family:Courier New;line-height:150%;width:760px;overflow-y:visible">


我们经常会在页面中添加一些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('

'+thistime+'
')
document.bgclocknoshade.document.write('
'+thistime+'
')
document.close()
}
var timer=setTimeout("clockon()",200)
}

  //
</script>

  二、在<body></body>直接加入如下代码:

  

  

  



  注:"font-size:120px"是用来设置字体的大小,color:FF8888是用来设置字体颜色的。

  三、最后把<body>中内容改为:

<body bgcolor="#ffffff" onLoad="clockon()">

  注:<body bgcolor="#ffffff" onLoad="clockon()">中的"#ffffff" 是网页的背景颜色代码,可以自行修改。

  提醒:该效果所显示的时钟是利用层来定位的,所以你可在Dreamweaver中移动时钟的位置;另外,时钟具有阴影效果,这些都是可以自行修改的。如果大家有什么疑问可以跟我们交流。

</td> </tr> </table></td> </tr>   
</td> </tr> </table> </textarea>
↑返回目录
前一篇: JavaScript实例 实现网页“打字机”效果
后一篇: 判断访问者的浏览器是否支持JavaScript和Cookies