从天飘落的文字

最新推荐文章于 2022-01-11 15:11:13 发布

chenqiangf3709186

最新推荐文章于 2022-01-11 15:11:13 发布

阅读量83

点赞数

原文链接：https://my.oschina.net/u/3001240/blog/790442

版权

<!DOCTYPE html>
<html>
<head lang="zh-CN">
    <meta charset="UTF-8">
    <title>Matrix</title>
    <style>
        * { margin: 0; padding: 0; }
        body { font-family: Impact; background: #333; }
        h1 {
            width: 800px;
            color: #666;
            text-shadow: 0 0 4px #000;
            font-size: 128px;
            text-align: center;
            text-transform: uppercase;
            position: fixed;
            left: calc(50% - 400px);
            top: calc(50% - 100px);
        }
        .wrap {
            position: relative;
            background: green;
        }
        .char {
            color: #0c0;
            font-size: 36px;
            position: fixed;
            top: 0;
            left: 0;
            /*transition: all 2s;*/
        }
    </style>
</head>
<body>
    <h1>Matrix</h1>
    <!--<div id="a" class="char">A</div>-->
    <script>
        function $$(id){
            return document.querySelector("#" + id);
        }
        function rand(min, max){
            return Math.round( Math.random() * (max - min) + min);
        }
        function randChar(n){
            var chs = "abcdefghijklmnopqrstuvwxyz0123456789#@!$%&*+=?";
            var str = (n > 1)? chs[rand(0, 25)] : chs[rand(0, chs.length - 1)];
            for(var i = 0;i < n - 1;i++){
                str += chs[rand(0, 35)];
            }
            return str;
        }
        var bw = document.documentElement.clientWidth;
        var bh = document.documentElement.clientHeight;
        function Matrix() {
            this.obj = null;
            this.id = randChar(16);       // 随机ID
            this.w = rand(18, 48);        // 字符宽度 = 字体大小
            this.x = rand(0, bw - this.w);// 随机水平位置
            this.y = -100;
            this.d = 0;
            this.sy = rand(5, 20);        // 随机下落速度
            this.sd = rand(0, 1) ? rand(5, 40) : -rand(5, 40); // 带方向的旋转速度
            this.ch = randChar(1);        // 随机字符
            this.init = function() {
                this.obj = document.createElement("div");
                this.obj.className = "char";
                this.obj.id = this.id;
                document.querySelector("body").appendChild(this.obj);
                this.obj = $$(this.id);
                this.run(); // 启动 start!
            }
            this.run = function() {
                var _this = this;
                this.timer = setInterval(function(){
                    _this.y += _this.sy;   // 新的下落位置
                    _this.d += _this.sd;
                    // 新的旋转角度（带+顺-逆方向）
                    if (_this.y > bh) {
                        _this.w = rand(18, 48);        // 字符宽度 = 字体大小
                        _this.x = rand(0, bw - _this.w);// 随机水平位置
                        _this.y = -100;                // 画面外：顶部
                        _this.sy = rand(5, 20);        // 随机下落速度
                        _this.sd = rand(0, 1) ? rand(5, 40) : -rand(5, 40);
                        _this.ch = randChar(1);        // 随机字符
                    }
                    _this.obj.innerHTML = _this.ch;
                    _this.obj.style.left = _this.x + "px";
                    _this.obj.style.top = _this.y + "px";
                    _this.obj.style.fontSize = _this.w + "px";
                    _this.obj.style.transform = "rotate(" + _this.d + "deg)";
                    console.log(_this.d);
                }, 50);
            }
            this.init();
        }
        var max = 50;
        for(var i = 0;i<max;i++){
            new Matrix();
        }

    </script>
</body>
</html>