1.创建画布
2.创建工具对象--tools.js
var Tools = {
getRandom: function(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
}
3.创建box盒子对象--box.js
3.1创建构造函数
function Box(parent,options){...}
3.2 检测输入的对象值
options=options||{}//options 如果有值返回options,如果没有值，返回{}
3.3 设置对象属性
this.backgroundColor = options.backgroundColor || "red";
this.width = options.width || 20;
this.height = options.height || 20;
this.x = options.x || 0;
this.y = options.y || 0;
3.4 动态创建div标签，并追加到container内
this.div=document.createElement("div");
this.parent.appendChild(this.div);
3.5 设置div的样式
在Box构造函数中调用样式函数
this.init();
/通过原型设置init方法实现随机产生方块对象，并渲染到container上
//样式初始化方法
Box.prototype.init = function() {
//调取样式，追加到container内
this.parent.appendChild(this.div);
//添加样式
var div = this.div;
div.style.backgroundColor = this.backgroundColor;
div.style.width = this.width + "px";
div.style.height = this.height + "px";
div.style.position = "absolute";//脱离文档流
div.style.left = this.x + "px"; //x横坐标
div.style.top = this.y + "px"; //y纵坐标
}
3.6 随机生成方块的位置
调用随机生成方块的位置的方法
// 调用随机生成方块的位置
this.random();
//随机生成方块的位置方法
Box.prototype.random = function() {
//方法一 获取最远距离
this.x = Tools.getRandom(0, this.parent.offsetWidth-this.div.offsetWidth);
this.y = Tools.getRandom(0, this.parent.offsetHeight -this.div.offsetHeight);
/*//方法二 获取最远距离
* this.x = Tools.getRandom(0, this.parent.offsetWidth / this.width - 1) * this.width;
this.y = Tools.getRandom(0, this.parent.offsetHeight / this.width - 1) * this.height;*/
this.div.style.left = this.x + "px";
this.div.style.top = this.y + "px";
}
4.生成10个方块，随机生成颜色----main.js
4.1获取div容器
//获取画布
var containerObj = document.getElementById("container");
4.2设置数组存储创建的方块对象
//设置数组存储创建的方块对象
var arr = [];
//
for(var i = 0; i < 10; i++) {
var r = Tools.getRandom(0, 255);
var g = Tools.getRandom(0, 255);
var b = Tools.getRandom(0, 255);
//实例化Box对象
var boxObj = new Box(containerObj, {
backgroundColor: "rgb(" + r + "," + g + "," + b + ")"
});
//把创建好的方块对象，添加到数组中
arr.push(boxObj);
}
5.设置随机位置,开启定时器----main.js
setInterval(function() {
// 随机生成方块的坐标
for (var j = 0; j< arr.length; j++) {
arr[j].random();
}
}, 500);
完整代码：
主页面：
Document
css:
# container {
width: 800px;
height: 600px;
background-color: lightgray;
position: relative;
}
创建工具对象--tools.js
var Tools = {
getRandom: function(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
}
创建box盒子对象--box.js
function Box(parent, options) {
options = options || {};
// 设置对象的属性
this.backgroundColor = options.backgroundColor || 'red';
this.width = options.width || 20;
this.height = options.height || 20;
this.x = options.x || 0;
this.y = options.y || 0;
// 创建对应的div
this.div = document.createElement('div');
parent.appendChild(this.div);
this.parent = parent;
// 设置div的样式
this.init();
}
// 初始化div (方块)的样式
Box.prototype.init = function () {
var div = this.div;
div.style.backgroundColor = this.backgroundColor;
div.style.width = this.width + 'px';
div.style.height = this.height + 'px';
div.style.left = this.x + 'px';
div.style.top = this.y + 'px';
// 脱离文档流
div.style.position = 'absolute'
}
// 随机生成方块的位置
Box.prototype.random = function () {
// 父容器的宽度/方块的宽度 总共能放多少个方块
var x = Tools.getRandom(0, this.parent.offsetWidth / this.width - 1) * this.width;
var y = Tools.getRandom(0, this.parent.offsetHeight / this.height - 1) * this.height;
this.div.style.left = x + 'px';
this.div.style.top = y + 'px';
}
设置随机位置,开启定时器----main.js
// 生成10个方块，随机生成颜色
// 获取容器
var container = document.getElementById('container');
// 数组，存储创建的方块对象
var array = [];
for (var i = 0; i < 10; i++) {
var r = Tools.getRandom(0, 255);
var g = Tools.getRandom(0, 255);
var b = Tools.getRandom(0, 255);
var box = new Box(container, {
backgroundColor: 'rgb('+ r +','+ g +','+ b +')'
});
// 把创建好的方块对象，添加到数组中
array.push(box);
}
// 设置随机位置，开启定时器
setInterval(randomBox, 500);
// 页面加载完成，先设置随机位置
randomBox();
function randomBox() {
// 随机生成方块的坐标
for (var i = 0; i < array.length; i++) {
var box = array[i];
box.random();
}
}