Javascript做的数字时钟 用表格实现 

先放上效果图：

原理就是每一个数字对应一个二维数组，然后压缩数据，再将其解压缩，加一个定时器然后再设置背景颜色输入到表格中。
源代码如下：
<html lang="en">
<head>
    <meta charset="utf8"/>
    <title></title>
    <style>
        td {
            width: 15px;
            height: 15px;
         border: 0px solid;
        }

        table {
            border-collapse: collapse;
            float: left;
        }
    </style>
</head>
<body>
<div id="tbl">
</div>
<div id="tb2">
</div>
<div id="tb3">
</div>
<div id="tb4">
</div>
<div id="tb5">
</div>
<div id="tb6">
</div>
<div id="tb7">
</div>
<div id="tb8">
</div>
<div id="output"></div>
<script>
    function f(n,N) {
        A =  new Array();
        for (let i = 0; i < N; i++) {
            if ((1 << i) & n) {
                A.push(i);
                // document.write(i+" ");
            }
        }
        return A;
    }
    function draw(i,tbl)
    {
        A0 = new Array(0x0,0x7c,0x44,0x44,0x44,0x44,0x44,0x7c);
        A1 = new Array(0x0,0x18,0x14,0x10,0x10,0x10,0x10,0x7c);
        A2 = new Array(0x0,0x7c,0x40,0x40,0x7c,0x4,0x4,0x7c);
        A3 = new Array(0x0,0x7c,0x40,0x40,0x7c,0x40,0x140,0x7c);
        A4 = new Array(0x0,0x44,0x44,0x44,0x7c,0x40,0x40,0x40);
        A5 = new Array(0x0,0x7c,0x4,0x4,0x7c,0x40,0x40,0x7c);
        A6 = new Array(0x0,0x7c,0x4,0x4,0x7c,0x44,0x44,0x7c);
        A7 = new Array(0x0,0x7c,0x40,0x40,0x40,0x40,0x40,0x40);
        A8 = new Array(0x0,0x7c,0x44,0x44,0x7c,0x44,0x44,0x7c);
        A9 = new Array(0x0,0x7c,0x44,0x44,0x7c,0x40,0x40,0x7c);
        A10 = new Array(0x0,0x0,0x0,0x8,0x0,0x8,0x0,0x0);
        AA = new Array();

        if(i==0) AA = A0;
        else if(i==1) AA = A1;
        else if(i==2) AA = A2;
        else if(i==3) AA = A3;
        else if(i==4) AA = A4;
        else if(i==5) AA = A5;
        else if(i==6) AA = A6;
        else if(i==7) AA = A7;
        else if(i==8) AA = A8;
        else if(i==9) AA = A9;
        else if(i==10) AA = A10;

        const N = 8;
        let html = '<table border="0">';
        for(var i=1;i<N;i++)
        {
            A = f(AA[i],N);
            html += '<tr>';
            for (let j = 0; j < N; j++) {
                if(A.includes(j)){
                    html += '<td bgcolor="#8a2be2"></td>';
                }
                else{
                    html += '<td></td>';
                }

            }
            html += '</tr>';
        }
        html += '</table>';
        document.getElementById(tbl).innerHTML = html;
    }
    setInterval(function () {
        var myDate = new Date();
        var h = myDate.getHours();       //获取当前小时数(0-23)
        var m = myDate.getMinutes();     //获取当前分钟数(0-59)
        var s =myDate.getSeconds();     //获取当前秒数(0-59)
        var h1= Math.floor(h/10);
        var h2= Math.floor(h%10);
        var m1= Math.floor(m/10);
        var m2= Math.floor(m%10);
        var s1= Math.floor(s/10);
        var s2= Math.floor(s%10);
        // document.write(h1,h2+" ",m1,m2+" ",s1,s2);
        draw(h1,"tbl");
        draw(h2,"tb2");
        draw(10,"tb3");
        draw(m1,"tb4");
        draw(m2,"tb5");
        draw(10,"tb6");
        draw(s1,"tb7");
        draw(s2,"tb8");

    },1000);

</script>
</body>
</html>
posted @ 2019-11-22 13:27  zju_cxl  阅读(73)  评论(0)    收藏  举报