日期:2014-05-16  浏览次数:20333 次

用javascript做的一个背景时钟

今天给大家说点有意识的东西,用js做的一个背景时钟,看代码吧:

<html>
<head>
<title>
背景时钟
</title>
<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>
<link rel="stylesheet" href="../style.css">
</head>
<body onLoad="clockon()">
  <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>
</body>
</html>
效果截图如下: