XM的小窝


 

JavaScript 随机圆点+位移效果

感觉自己对于面向对象这一块还需要加强一下,所以就做了个小练习 :鹿乃_???:

效果

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机方块</title>
    <style>
        body {
            padding: 0;
            margin: 0;
            overflow: hidden;
        }

        .bigbox {
            position: relative;
            background-color: #313131;
            width: 100vw;
            height: 100vh;
        }

        .bigbox .square {
            position: absolute;
            display: block;
            width: 20px;
            height: 20px;
            background-color: red;
            border-radius: 50%;
            overflow: hidden;
            transition: left 1s, top 1s;
        }
    </style>
</head>

<body>
    <div class="bigbox">
    </div>
    <!-- tools.js -->
    <script>
        var Tools = {
            getRandom: function(min, max) {
                //min和max都能取到
                return Math.floor(Math.random() * (Math.floor(max) - Math.ceil(min) + 1)) + min
            }

        };
    </script>
    <!-- box.js -->
    <script>
        function Box(parent, options) {
            //防止空值
            options = options || {};
            this.color = options.color || 'transparent';
            this.width = options.width || 20;
            this.height = options.height || 20;
            //默认在屏幕上随机创建
            this.x = options.x || Tools.getRandom(0, parent.offsetWidth - (options.width || 20));
            this.y = options.y || Tools.getRandom(0, parent.offsetHeight - (options.height || 20));
            this.parent = parent;
            //创建span
            this.span = document.createElement('span');
            parent.appendChild(this.span);

            //初始化
            this.init(this.span);
        }
        //公共的方法,用原型比较省空间
        //初始化span的样式
        Box.prototype.init = function(element) {
            //获取每个对象的span
            let span = this.span;
            span.style.backgroundColor = this.color;
            span.style.width = this.width + 'px';
            span.style.height = this.height + 'px';
            span.style.top = this.y + 'px';
            span.style.left = this.x + 'px';
            span.classList.add('square');
        };
        //随机方块位置
        Box.prototype.random = function() {
            let x = Tools.getRandom(0, this.parent.offsetWidth / this.width - 1) * this.width
            let y = Tools.getRandom(0, this.parent.offsetHeight / this.height - 1) * this.height
            this.span.style.left = x + 'px';
            this.span.style.top = y + 'px';
        }
    </script>
    <!-- 主方法 -->
    <script>
        var ele = document.querySelector('.bigbox');
        var box = [];
        for (let i = 0; i < 1081; i++) {
            box.push(new Box(ele, {
                height: 5,
                width: 5,
                color: `rgba(${Tools.getRandom(0,255)},${Tools.getRandom(0,255)},${Tools.getRandom(0,255)},1)`,
            }));
        }
        //设置随机位置
        function pos() {
            box[Tools.getRandom(0, 1080)].random();
        }
        pos();
        setInterval(pos, 1);
    </script>
</body>

</html>
点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注