html文档
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
</div>
<script src="js/tools.js"></script>
<script src="js/box.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Tools.js文档
getRandom: function (min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
}
box.js文档
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文档
// 获取容器
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();
}
}
网友评论