自制二进制时钟之二：先干脏活

    在上一篇文章中，已经说明了二进制时钟的背景和原理，从这一篇开始我就来和大家一起一步一步的实现它，然后再一步一步的完善它。
    大厦得打地基，编程得学C，二进制时钟得画滴答滴好蹩脚的押韵，来，我们开始干脏活！
    这一步我们的目标是建立二进制表的显示模块，最终的效果如下，我们约定这里的每个小格子称为：元素

    看到这个效果，你想用什么方法实现？我想到的有两种。

• 一、创建一个四行六列的table，将需要操作的表格元素添加上适当的id，代码如下
  
  
  1<style type="text/css">
  2    td {}{border-style:solid;border-width:1px;}
  3</style>
  1<table id="thetab" style="border-style:none;font-size:10pt;font-family:courier new;" cellpadding="0" cellspacing="5">
  2    <tr><td /><td id="h14">&nbsp;&nbsp;</td><td /><td id="m14">&nbsp;&nbsp;</td><td /><td id="s14">&nbsp;&nbsp;</td></tr>
  3    <tr><td /><td id="h13">&nbsp;&nbsp;</td><td id="m23">&nbsp;&nbsp;</td><td id="m13">&nbsp;&nbsp;</td><td id="s23">&nbsp;&nbsp;</td><td id="s13">&nbsp;&nbsp;</td></tr>
  4    <tr><td id="h22">&nbsp;&nbsp;</td><td id="h12">&nbsp;&nbsp;</td><td id="m22">&nbsp;&nbsp;</td><td id="m12">&nbsp;&nbsp;</td><td id="s22">&nbsp;&nbsp;</td><td id="s12">&nbsp;&nbsp;</td></tr>
  5    <tr><td id="h21">&nbsp;&nbsp;</td><td id="h11">&nbsp;&nbsp;</td><td id="m21">&nbsp;&nbsp;</td><td id="m11">&nbsp;&nbsp;</td><td id="s21">&nbsp;&nbsp;</td><td id="s11">&nbsp;&nbsp;</td></tr>
  6</table>
  
  效果如下
  
  
  
  效果还不错，google的二进制时钟正是这样实现的。它的优点是简单，缺点是需要调节字体属性。
  -->元素消隐控制：查看过html后发现，凡是在td标签中没有空格的元素都隐藏了，而需要显示的元素包含了两个空格
  -->元素大小控制：由于表格元素是被字符“撑”起来的，所以更改table标签style的font-size可以改变横向和纵向的大小，而空格的个数可以改变横向的大小；当然也可以通过更改tr的height以及td的width来控制，但是font-size一定要调到最小，这样才可以精确控制元素的大小，否则当宽和高的属性小于字符的宽和高时还是会被字符撑大。
  -->元素间距控制：利用table标签的cellspacing属性
  
• 二、创建一个一行六列的表格，在每个td中添加四个img，分别用br隔开，使其保持在一列上，然后给出相应的id以备后用，代码如下
   1<table cellpadding = "0" cellspacing = "0" border = "0">
   2            <tr>
   3                <td valign = "bottom">
   4                    <img src="" style ="background-color:#f0f0f0; width:12px; height:12px; visibility:hidden;margin:3,3,3,3; " alt = "" id = "h18" /><br />
   5                    <img src="" style ="background-color:#f0f0f0; width:12px; height:12px; visibility:hidden;margin:3,3,3,3; " alt = "" id = "h14" /><br />
   6                    <img src="" style ="background-color:#f0f0f0; width:12px; height:12px; margin:3,3,3,3; " alt = "" id = "h12" /><br />
   7                    <img src="" style ="background-color:#f0f0f0; width:12px; height:12px; margin:3,3,3,3; " alt = "" id = "h11" />
   8                </td>
   9                <td valign = "bottom">
  10                    <img src="" style ="background-color:#f0f0f0; width:12px; height:12px; margin:3,3,3,3; " alt = "" id = "h28" /><br />
  11                    <img src="" style ="background-color:#f0f0f0; width:12px; height:12px; margin:3,3,3,3; " alt = "" id = "h24" /><br />
  12                    <img src="" style ="background-color:#f0f0f0; width:12px; height:12px; margin:3,3,3,3; " alt = "" id = "h22" /><br />
  13                    <img src="" style ="background-color:#f0f0f0; width:12px; height:12px; margin:3,3,3,3; " alt = "" id = "h21" />
  14                </td>
  15                <td valign = "bottom">
  16                    <img src="" style ="background-color:#f0f0f0; width:12px; height:12px; visibility:hidden; margin:3,3,3,3; " alt = "" id = "m18" /><br />
  17                    <img src="" style ="background-color:#f0f0f0; width:12px; height:12px; margin:3,3,3,3; " alt = "" id = "m14" /><br />
  18                    <img src="" style ="background-color:#f0f0f0; width:12px; height:12px; margin:3,3,3,3; " alt = "" id = "m12" /><br />
  19                    <img src="" style ="background-color:#f0f0f0; width:12px; height:12px; margin:3,3,3,3; " alt = "" id = "m11" />
  20                </td>
  21                <td valign = "bottom">
  22                    <img src="" style ="background-color:#f0f0f0; width:12px; height:12px; margin:3,3,3,3; " alt = "" id = "m28" /><br />
  23                    <img src="" style ="background-color:#f0f0f0; width:12px; height:12px; margin:3,3,3,3; " alt = "" id = "m24" /><br />
  24                    <img src="" style ="background-color:#f0f0f0; width:12px; height:12px; margin:3,3,3,3; " alt = "" id = "m22" /><br />
  25                    <img src="" style ="background-color:#f0f0f0; width:12px; height:12px; margin:3,3,3,3; " alt = "" id = "m21" />
  26                </td>
  27                <td valign = "bottom">
  28                    <img src="" style ="background-color:#f0f0f0; width:12px; height:12px; visibility:hidden; margin:3,3,3,3; " alt = "" id = "s18" /><br />
  29                    <img src="" style ="background-color:#f0f0f0; width:12px; height:12px; margin:3,3,3,3; " alt = "" id = "s14" /><br />
  30                    <img src="" style ="background-color:#f0f0f0; width:12px; height:12px; margin:3,3,3,3; " alt = "" id = "s12" /><br />
  31                    <img src="" style ="background-color:#f0f0f0; width:12px; height:12px; margin:3,3,3,3; " alt = "" id = "s11" />
  32                </td>
  33                <td valign = "bottom">
  34                    <img src="" style ="background-color:#f0f0f0; width:12px; height:12px; margin:3,3,3,3; " alt = "" id = "s28" /><br />
  35                    <img src="" style ="background-color:#f0f0f0; width:12px; height:12px; margin:3,3,3,3; " alt = "" id = "s24" /><br />
  36                    <img src="" style ="background-color:#f0f0f0; width:12px; height:12px; margin:3,3,3,3; " alt = "" id = "s22" /><br />
  37                    <img src="" style ="background-color:#f0f0f0; width:12px; height:12px; margin:3,3,3,3; " alt = "" id = "s21" />
  38                </td>
  39            </tr>
  40        </table>
  
  效果如下：
  
  
  
  这正是我们要的效果。它的优点是可控性极强，所有控制都“封装”（借用一下，嘿嘿）在img标签内部。
  -->元素消隐控制：由visibility属性控制，将其值设为hidden时则隐藏
  -->元素大小控制：由width和height属性控制
  -->元素间距控制：由margin 属性控制
  由于元素的控制全部在一起，所以管理起来较为容易，这里就将css直接写到每个元素后面了，如果将它们提炼出来放到一个style标签中代码会简洁些，当然现在看起来也还蛮好。

    嘿咻嘿咻，脏活干完了，休息一下，下一篇我们的二进制时钟就要跳动起来喽。