星星时钟改进版

字数统计: 683字 | 阅读时长: 4分 | 本文总阅读量: 次
2019-02-09
星星时钟改进
星星时钟改进版

在上一篇星星时钟的基础上把非数字部分去除，以此可以为时钟增添渐变颜色，代码如下：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>改进版</title>
    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    #weizhi{
        position: absolute;
        left: 50%;
        margin-left: -240px;
        background: linear-gradient(to right, black,red,green,blue);
        /*设置渐变色to right则为从左到右渐变，to bottom从上到下，还可以形如to left top为对角渐变*/
        -webkit-background-clip: text;
        color: transparent;
    }
    table{
        border: 0px;
    }
    #board0,
    #board1,
    #board2,
    #board3,
    #board4,
    #board5,
    #a,
    #b
    {
        float: left;
    }
    #a,
    #b
    {
        margin-top: 25px;
    }
    .on {
        font-size: 1px;
        color: transparent;   
        width: 2px;   
        height: 5px;
    }
    .off {
        font-size: 1px;
        width: 2px;
        height: 5px;
    }
    </style>
    <div id="weizhi">
    <div id="board0"></div>
    <div id="board1"></div>
    <div id="a"></div>
    <div id="board2"></div>
    <div id="board3"></div>
    <div id="b"></div>
    <div id="board4"></div>
    <div id="board5"></div>
    </div>
<script>
    var X = 7;
    var Y = 9;
    var data = [
    [0,4+8+16,2+32,2+32,2+32,2+32,2+32,4+8+16,0],
    [0,8,8+4,8,8,8,8,4+8+16,0],
    [0,4+8+16,2+32,16,8,4,2,2+4+8+16+32,0],
    [0,4+8+16,2+32,32,4+8+16,32,2+32,4+8+16,0],
    [0,16+32,8+32,4+32,2+32,2+4+8+16+32,32,32,0],
    [0,2+4+8+16+32,2,2+4+8+16,32,32,2+32,4+8+16,0],
    [0,4+8+16,2+32,2,2+4+8+16,2+32,2+32,4+8+16,0],
    [0,2+4+8+16+32,2+32,16,8,4,4,4,0],
    [0,4+8+16,2+32,2+32,4+8+16,2+32,2+32,4+8+16,0],
    [0,4+8+16,2+32,2+32,4+8+16+32,32,2+32,4+8+16,0],
    [0,0,8,0,0,0,8,0,0]
    ]; 
    function toNum(num){
        if(num<10){
            return '0'+num;
        }
        else {
            return ""+num;  
         } 
    }
    function Draw(num) {
        var s = '<table>';
        for (var i = 0; i < data[num].length; i++) {
            s += '<tr>';
            var b = data[num][i];

            for (var j = 0; j < X; j++) {
                var color = 'off';
                if ((b>>j)%2==1) {
                    color = 'on';
                    s += '<td class="'+color+'">✦</td>';
                }
                else {
                    s += '<td class="'+color+'"></td>';
                }
            }       
            s += '</tr>';
        }
        s += '</table>';
        return s;
    }
    function showtime(){
    var time= new Date();
    var tm=toNum(time.getHours())+toNum(time.getMinutes())+toNum(time.getSeconds());
    for(var i=0;i<tm.length;i++){
    document.getElementById('board'+i).innerHTML = Draw(tm[i]);
    }
    }
    document.getElementById('a').innerHTML = Draw(10);
    document.getElementById('b').innerHTML = Draw(10);
    setInterval("showtime()",1000);
</script>
</head>
<body>

</body>
</html>