前端学习笔记day19 面向对象案例之随机生成方块

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    
    <style>
        #box {
            width: 800px;
            height: 600px;
            background-color: lightgrey;
            position: relative;
        }
    </style>
</head>
<body>
    <div id='box'></div>
    <script src='tools.js'></script>
    <script src='box.js'></script>
    <script src='main.js'></script>
    <script>    
        window.onload = function() {
            main();    
        }
    </script>
</body>
</html>

function getRandom(min,max) {
    return Math.floor(Math.random()*(max - min + 1)) + min;
}

tools.js

function Box(parent,options) {
    options = options || {};
    this.width = options.width || 20;
    this.height = options.height || 20;
    this.color = options.color || 'pink';
    this.x = options.x || 0;
    this.y = options.y || 0;

    this.parent = parent;
    this.init();
}
var position = 'absolute';
Box.prototype.init = function() {
    var box = document.createElement('div');
    box.style.width = this.width + 'px';
    box.style.height = this.height + 'px';
    box.style.backgroundColor = this.color;
    box.style.position = position;
    box.style.left = this.x + 'px';
    box.style.top = this.y + 'px';
    this.parent.appendChild(box);
}
Box.prototype.random = function() {
    var x = getRandom(0,this.parent.offsetWidth/this.width - 1) * this.width;
    var y = getRandom(0,this.parent.offsetHeight/this.height - 1) * this.height;
    return {
        x: x,
        y: y
    }

}

// 测试代码
// var parent = document.getElementById('box');
// var box = new Box(parent);

box.js

function main() {
    var parent = document.getElementById('box');
    var arr = [];
    for(var i = 0; i < 10; i++) {

        var r = getRandom(0,255);
        var g = getRandom(0,255);
        var b = getRandom(0,255);
        var box = new Box(parent,{
            color: 'rgb('+ r +','+ g +','+ b +')'

        })
        arr.push(box);
     }
     randomIndex();
     setInterval(randomIndex,500);    
     function randomIndex() {
         for(var i = 0; i < arr.length; i++) {
             var x = arr[i].random().x;
             var y = arr[i].random().y;
             parent.children[i].style.left = x + 'px';
             parent.children[i].style.top = y + 'px';
         }
     }
     
}

main.js

运行结果：

前端学习笔记day19 面向对象案例之随机生成方块

秒客网

前端学习笔记day19 面向对象案例之随机生成方块

相关文章