创建对象的简单应用

题目：创建10个位置随机、颜色随机的盒子，每隔一段时间，需要更换这10个盒子的位置

一、盒子的原始html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>产生10个小盒子，颜色随机位置随机</title>
    <style>
    .box{
        width: 800px;
        height: 600px;
        background-color: skyblue;
        position: relative;
    }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

二、创建产生的小盒子对象

function Box(parent,options) {
    options = options || {};
    this.width = options.width || 25;
    this.height = options.height || 25;
    this.backgroundColor = options.backgroundColor || "red" ;
    this.x = options.x || 0;
    this.y = options.y || 0;
    this.dom = document.createElement("div");
    this.parent = parent;
    this.init();//这里是调用初始化方法
    
}

三、创建小盒子的初始化方法

Box.prototype.init = function () {
    var oDiv = this.dom;
    oDiv.style.width = this.width + "px";
    oDiv.style.height = this.height + "px";
    oDiv.style.backgroundColor = this.backgroundColor;
    oDiv.style.position = "absolute";
    oDiv.style.left = this.x + "px";
    oDiv.style.top = this.y + "px";
    this.parent.appendChild(oDiv);
}

四、引入通用的方法工具库

//产生min-max的随机数，包括min和max
function toRandom(min, max) {
    return Math.round(Math.random() * (max - min)) + min;
    // return Math.floor(Math.random()*(max-min+1))+min;
    // return Math.ceil(Math.random()*(max-min+1))+min-1;
}
//获取随机颜色
function getColor() {
    var res = "#";
    var arr = [0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f'];
    for (let i = 0; i < 6; i++) {
       res += arr[toRandom(0, 16)];
    }
    return res;
}

五、写具体代码实现小盒子的随机

 var parent = document.querySelector(".box");
        // new Box(parent);
        // for (let i = 0; i < 10; i++) {
        //     new Box(parent,{x:toRandom(0,775),
        //                     y:toRandom(0,575),
        //                     backgroundColor:getColor()});
        // }
        setInterval(function () {
            //删除之前生成的小盒子
            for (var i = 0; i < parent.children.length; i++) {   
            parent.removeChild(parent.children[i]);
                i--;
            }
     
            //生成新的盒子
        for (var i = 0; i < 3; i++) { 
           var box = new Box(parent,{x:toRandom(0,775), 
                            y:toRandom(0,575),
                            backgroundColor:getColor()}); }  
        },1000);

六、另外还可以将这个位置变换放到Box的原型上去

Box.prototype.random = function () {
    var oDiv = this.dom;
    setInterval(function () {
        oDiv.style.top = toRandom(0, 575) + "px";
        oDiv.style.left = toRandom(0, 775) + "px";
        oDiv.style.backgroundColor = getColor();
    },1000);
}

   for (let i = 0; i < 3; i++) {
            new Box(parent,{x:toRandom(0,775),
                            y:toRandom(0,575),
                            backgroundColor:getColor()});
        }

七、为了防止变量污染，我们会将变量放到一个对象中，进行统一管理

var Tool = {
//产生min-max的随机数，包括min和max
toRandom:function (min, max) {
    return Math.round(Math.random() * (max - min)) + min;
},
//获取随机颜色
getColor:function () {
    var res = "#";
    var arr = [0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f'];
    for (let i = 0; i < 6; i++) {
       res += arr[toRandom(0, 16)];
    }
    return res;
}

}

当使用时，只需要增加Tool. 即可