通过JS代码制作背景时钟效果

2012-11-05 来源：网络

【实例名称】

通过JS代码制作背景时钟效果

【实例描述】

在页面上显示时间是网站常见的特效：本例介绍如何在页面的背景上显示时钟，以增加页面的三维效果。

【实例代码】

<html>
<head>
<TITLE>背景时钟-学无忧（www.xue51.com）</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代码的准确性，请点击：背景时钟进行本实例源码下载