效果图
代码如下:
css代码
*{
margin: 0;
padding: 0;
}
/* 设置html和body标签的宽高和浏览器可视区域一样*/
html, body{
width: 100%;
height: 100%;
}
/* 设置小球移动范围的相关样式*/
#wrap{
width: 100%;
height: 100%;
background-color: black;
position: relative;
overflow: hidden;
}
.boll{
position: absolute;
border-radius: 50%;
}
js代码
window.onload = function () {
//工具函数:产生指定范围内的随机数
function randFn(min, max) {
return parseInt(Math.random() * (max - min) + min);
}
//获取容器节点(减少document操作次数,减少损耗)
var wrap = document.querySelector('#wrap');
// 创建小球对象的构造函数
function Boll(wh) {
// 随机产生小球的宽高
var wh = randFn(20, 50);
// 设置宽高属性和属性值
this.width = wh;
this.height = wh;
// 设置小球诞生点的坐标属性
this.top = randFn(0, document.body.offsetHeight - wh) + 'px';
this.left = randFn(0, document.body.offsetWidth - wh) + 'px';
//设置小球随机背景颜色 rgba
//rgba(255,255,255,0.5)
this.color = 'rgba(' + randFn(0, 255) + ',' + randFn(0,255) + ',' + randFn(0, 255) + ',' + Math.random() + ')';
// 设置小球随机移动速度的属性
this.speedX = randFn(-10, 10);
this.speedY = randFn(-10, 10);
// 设置保存小球标签的属性
this.div = document.createElement('div');
}
// 原型方法: 绘制小球(配置div标签的相关css样式,然后把标签接进文档流)
Boll.prototype.draw = function () {
this.div.className = 'boll';
// 配置小球宽高
this.div.style.width = this.width + 'px';
this.div.style.height = this.height + 'px';
//小球诞生点
this.div.style.top = this.top;
this.div.style.left = this.left;
//小球背景颜色
this.div.style.backgroundColor = this.color;
// 把配置好的节点拼接进文档流
wrap.appendChild(this.div);
}
// 原型方法:让小球移动,且碰壁反弹
Boll.prototype.run = function () {
//因为在定时器中使用的this指针是指向window对象的,要在定时器中获取当前操作的小球对象,就必须在定时器外部用变量把当前操作小球对象保存下来,在定时器内部通过该变量获取小球对象
var self = this;
setInterval(function () {
//判断小球是否撞墙
var tag = self.div
if (tag.offsetLeft + tag.offsetWidth >= wrap.offsetWidth || tag.offsetLeft < 0) {
self.speedX *= -1;
}
if (tag.offsetTop + tag.offsetHeight >= wrap.offsetHeight || tag.offsetTop < 0) {
self.speedY *= -1;
}
tag.style.left = tag.offsetLeft + self.speedX + 'px';
tag.style.top = tag.offsetTop + self.speedY + 'px';
},30)
}
for (var i = 0; i < 100; i++) {
//创建小球对象
var boll = new Boll();
//调用对象绘制方法,把小球绘制进文档
boll.draw();
//调用小球移动
boll.run();
}
}
html
//小球移动范围
<div id = 'wrap'>
</div>
