clock.js var aNum=new Array();//数字编码 aNum[0]=[1,1,1,1,0,1,1,0,1,1,0,1,1,1,1]//1 aNum[1]=[0,0,1,0,0,1,0,0,1,0,0,1,0,0,1] aNum[2]=[1,1,1,0,0,1,1,1,1,1,0,0,1,1,1] aNum[3]=[1,1,1,0,0,1,1,1,1,0,0,1,1,1,1] aNum[4]=[1,0,1,1,0,1,1,1,1,0,0,1,0,0,1] aNum[5]=[1,1,1,1,0,0,1,1,1,0,0,1,1,1,1] aNum[6]=[1,0,0,1,0,0,1,1,1,1,0,1,1,1,1] aNum[7]=[1,1,1,0,0,1,0,0,1,0,0,1,0,0,1] aNum[8]=[1,1,1,1,0,1,1,1,1,1,0,1,1,1,1] aNum[9]=[1,1,1,1,0,1,1,1,1,0,0,1,0,0,1]//9 aNum[10]=[0,0,0,0,1,0,0,0,0,0,1,0,0,0,0]//: var blockW=8,blockH=8; //显示的小区块宽高 //创建数字小块div function createBlock(color) { var oDiv=document.createElement("div") oDiv.style.backgroundColor=color; oDiv.style.width=blockW; oDiv.style.height=blockH; oDiv.style.position="absolute"; oDiv.style.border="1px white solid"; return oDiv; } //根据给定数字数组创建数字层 function createNum(array,vcolor,hcolor) { var oDiv=document.createElement("div") oDiv.style.position="relative"; for(var j=0;j<array.length;j++) { var oBlock; if(array[j]==0) { oBlock=createBlock(hcolor); } else { oBlock=createBlock(vcolor); } oBlock.style.left=(j%3)*parseInt(oBlock.style.width); oBlock.style.top=parseInt(j/3)*parseInt(oBlock.style.height); oDiv.appendChild(oBlock) } return oDiv; } var oTime; //显示时钟 function showTime() { var time=new Date(); var times=//时间每位数字拆分成数组 [parseInt(time.getHours()/10),time.getHours()%10,10, parseInt(time.getMinutes()/10),time.getMinutes()%10,10, parseInt(time.getSeconds()/10),time.getSeconds()%10] if(oTime)oTime.parentNode.removeChild(oTime); oTime=document.createElement("div") oTime.style.position="relative"; oTime.style.width=33*blockW; oTime.style.height=6*blockH; oTime.style.border="2px red dashed"; oTime.style.left="100px" oTime.style.paddingTop=blockH; for(var i=0;i<times.length;i++) { var oContent=createNum(aNum[times[i]],'black','white'); oContent.style.left=i*4*blockW; oTime.appendChild(oContent); } document.getElementById("clock").innerHTML=oTime.outerHTML; // document.body.appendChild(oTime); setTimeout("showTime()",1000) } clock.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <mce:script src="clock.js" mce_src="clock.js"></mce:script> <mce:style type="text/css"><!-- #clock { position:absolute; left:200px; top:24px; width:365px; height:148px; text-align:center; z-index:1; } --></mce:style><style type="text/css" mce_bogus="1">#clock { position:absolute; left:200px; top:24px; width:365px; height:148px; text-align:center; z-index:1; }</style> </head> <body > <div id="clock"></div> <mce:script type="text/javascript"><!-- showTime(true); // --></mce:script> </body> </html>