原生js粒子时钟

最新推荐文章于 2024-05-05 09:07:44 发布

想旅游咯

最新推荐文章于 2024-05-05 09:07:44 发布

阅读量716

点赞数

分类专栏： web前端

web前端专栏收录该内容

109 篇文章 2 订阅

订阅专栏

原生js粒子时钟

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="screen"></div>
</body>
</html>
    <style>html,body {margin:0; padding:0; position:absolute; width:100%; height:100%; overflow: hidden}
#screen {width:80%; height:50%; background:#b6b6b6; position: absolute; left:10%; top:10%; overflow:hidden}
span.blue, span.green, span.gray, span.red {
    position: absolute;
    font-size: 0;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}
.blue {background: #000099}
.green {background: #339900}
.gray {background: rgba(25,25,25,0)}
.red {background: #ff0000}</style>
       <script>(function (D) {

    var _ = {
        extend: function (t, s, o) {
            if (o === undefined) o = true;
            for (var p in s) {
                if (!(p in t) || o) {
                    t[p] = s[p]
                }
            }
            return t;
        },
        addEvent: function (o, e, f) {
            o.addEventListener ? o.addEventListener(e, f, false) : o.attachEvent('on' + e, function () {f.call(o)})
        },
        $ : function (id) {
            return typeof id === 'string' ? D.getElementById(id) : id;
        },
        log : function (s) {
            !!window.console && console.log(s)
        }
    };

    var NUM = [
        '####   ########## #####################    ',
        '# #   #   #   ## ##   #      ## ## #    ',
        '# #   #   #   ## ##   #      ## ## # # ',
        '# #   #####################   #########    ',
        '# #   ##      #   #   ## #   ## #   # # ',
        '# #   ##      #   #   ## #   ## #   #    ',
        '####   #########   #########   #########    '
    ]

    var TM, tm, MF = Math.floor, ow = 10, od = 8, NT = [], _NT = [], scr, W, H, iPos = {}, e = 0, O = [], AO = {}, grid, gw, gh;

    function getTime () {

        AO = {};

        tm = TM;
        var T = new Date(),
            h = T.getHours(),
            m = T.getMinutes(),
            s = T.getSeconds();
        TM = [
            MF(h/10),
            h%10,
            MF(m/10),
            m%10,
            MF(s/10),
            s%10
        ];

        setTimeout(arguments.callee, 1000);
    }


    function toNT(TM, NT) {
        for (var i = 0; i < 7; i ++) {
            var temp = [];
            for (var j = 0; j < TM.length; j ++) {
                temp.push(NUM[i].substr(TM[j]*4, 4));
                if (j == 1 || j == 3) {
                    temp.push(NUM[i].substr(40, 4))
                }
            }
            NT[i] = temp.join('');
        }
    }

    function CNum () {
        toNT(TM, NT);
        if (tm && tm.length) {toNT(tm, _NT)}
        DrawNum();
        setTimeout(arguments.callee, 20)
    }

    function DrawNum () {

        var ind = 0;
        for (var i = 0; i < NT.length; i ++) {
            for (var j = 0; j < NT[i].length; j ++) {

                var _char = '@', nchar = NT[i].charAt(j);

                var c = nchar === '#' ? 'blue' : 'gray';

                if (nchar === '#') {
                    if (MF(j/4) < 3) c = 'red';
                    else if (MF(j/4) < 6) c = 'blue';
                    else if (MF(j/4) < 8) c = 'green';
                } else {
                    c = 'gray';
                }

                if (O.length >= 4*8*7) {
                    O[ind].o.className = c;
                    O[ind].o.style.left = j*(ow + od) + MF(j/4)*20 + iPos.x + 'px';
                    O[ind].o.style.top = i*(ow + od) + iPos.y + 'px';
                } else {
                    O.push(new Dot(c, {
                        l: j*(ow + od) + MF(j/4)*20 + iPos.x,
                        t: i*(ow + od) + iPos.y
                    }));
                }

                if (_NT.length === 7) {
                    _char = _NT[i].charAt(j);
                    if (_char === '#' && nchar === ' ') {
                        var k = 'k'+i+'_'+j, _c;
                        if (MF(j/4) < 3) _c = 'red';
                        else if (MF(j/4) < 6) _c = 'blue';
                        else if (MF(j/4) < 8) _c = 'green';
                        if (!AO[k]) {
                            AO[k] = new Dot(_c, {
                                l: j*(ow + od) + MF(j/4)*20 + iPos.x,
                                t: i*(ow + od) + iPos.y
                            })

                            AO[k].anim()
                        }
                    }
                }

                ind ++;
            }
        }
    }