星星时钟

字数统计: 775字 | 阅读时长: 4分 | 本文总阅读量: 次
2019-01-26
星星时钟
一个简单的实现时间显示的小功能，废话不多说，直接上代码，如何修改，都在代码注释里。
数字图案
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>星星时钟</title>
    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    body{
        background-image: url(https://i.loli.net/2019/01/29/5c4fdca1548a1.png);
        /*背景图片链接*/
        background-size: 1900px;
        background-repeat:no-repeat;
    }
    #weizhi{
        position: fixed;
        left: 26%;
    }
    #board0,
    #board1,
    #board2,
    #board3,
    #board4,
    #board5,
    #a,
    #b
    {
        float: left;
    }
    .on {
        color: rgba(51,153,255,200);    /*小星星颜色*/
        width: 12px;    /*每个小星的大小，最小不能小于星星的大小*/
    }
    .off {
        color: transparent;
        width: 12px;
        /*透明区域大小*/
    }
    </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>
    <embed src="http://music.163.com/song/media/outer/url?id=22712173.mp3" autostart="true" loop="true" hidden="true"></embed>
    <!-- 音乐部分链接及设置 -->
    </div>
<script>
    var X = 7;
    var Y = 9; // 规定每个数字为7*9大小，若要修改，下面0-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]
    ]; 
    // 数字和：对应的代码，x行y列，0-9每行对应的2^y次方为显示小星星处，第十个为：。
    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>';          // 为时钟显示的图案，可以搜索html符号替换对应的图案
            }       
            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>