二进制时钟

睡觉前逛了次园子，发现了一个挺好玩的东东----二进制时钟，呵呵
文章地址: Use after think - 二进制时钟
也就自己做了个，如下

 1 function writeBinaryClock(){
 2     document.writeln("<table cellpadding='0' cellspacing='0' id='clock'>")
 3     for(var i=3;i>-1;i--){
 4         document.writeln("<tr>");
 5         for(var j=5;j>-1;j--){
 6             document.write("<td>");
 7             if(blocks[j][i]){
 8                 document.write("<div id='"+blocks[j][i]+"' class='block'></div>");
 9             }
10             document.writeln("</td>");
11         }
12         document.writeln("</tr>");
13     }
14     document.writeln("</table>");
15 }
16 
17 var hr=min=60;
18 
19 var blocks=[["divsl0001","divsl0010","divsl0100","divsl1000"],
20             ["divsh0001","divsh0010","divsh0100"],
21             ["divml0001","divml0010","divml0100","divml1000"],
22             ["divmh0001","divmh0010","divmh0100"],
23             ["divhl0001","divhl0010","divhl0100","divhl1000"],
24             ["divhh0001","divhh0010"]];
25 
26 function setTime()
27 {
28     var time=new Date();
29     
30     setColor(time.getSeconds(),blocks[0],blocks[1]);
31     
32     if(min!=time.getMinutes()){
33         min=time.getMinutes();
34         setColor(min,blocks[2],blocks[3]);
35         
36         if(hr!=time.getHours()){
37             hr=time.getHours();
38             setColor(hr,blocks[4],blocks[5]);
39         }
40     }
41     
42     setTimeout("setTime()",1000);
43 }
44 
45 function setColor(num,arrL,arrH){
46     var h=Math.floor(num/10);
47     var l=num%10;
48     
49     setColorB(h, arrH);
50     setColorB(l, arrL);
51 }
52 
53 function $(element){
54     return document.getElementById(element);
55 }
56 
57 function setColorB(num, arr){
58     for(var i=0;i<arr.length;i++){
59         if((num|(1<<i))==num){
60             $(arr[i]).style.backgroundColor="#000000";
61         }else{
62             $(arr[i]).style.backgroundColor="#E0E0E0";
63         }
64     }
65 }
66 
67 writeBinaryClock();
68 setTime();

也可以在js里直接添加样式，我的设置

.block
{
    border: 1px solid #000000;
    background-color: #E0E0E0;
    width: 12px;
    height: 12px;
}
#clock
{            
    border: none;
    text-align: center;
    vertical-align: middle;
}
#clock tr
{
    height: 16px;
}
#clock tr td
{
    width: 16px;
}