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

一、盒子的原始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和maxfunction 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和maxtoRandom: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. 即可