废话不多说，直接开工，用大脑和代码说话。
躁动的小球效果展示 其实是个动态的页面，我也不知道怎么截取动态图片，不好意思，各位。
思路分析加代码
为了让各位读者更加清晰的明白整个制作过程，我采用边分析边写代码的形式来给大家呈现。
1、搭建模块：
其实我们的模块只有两个，一个背景，一个是小球。
<body>
<div id="wrap"> </div>
</body>
//这个div是什么呢？就是我们需要放置小球的区域,也是我们的背景区域。我给他一个起了名字叫做wrap
2、给我们搭建的模块添加应有的属性
<style>
//全局模式，去掉所有的内边距和外边距
*{
padding: 0 ;
margin: 0 ;
}
// 给html和body的高度设定100%是为了可以使我们的效果不会因为窗口的大小而受到影响
也是为了我们创建的div好赋值。
html,bady{
height:100%;
}
//给创建的div添加属性。
#wrap{height:100%;
background-color:black;
position:relative;
overflow:hidden;
}
// 给小球添加属性
.boll{
border-radius:50%;
position:absolute;
}
</style>
好了，准备工作已经做好了，下面我们要开始JS的代码操作了。
3、js实现动态的效果
<script type="text/javascript">
//思路分析、我们要创建的小球需要他有什么效果呢？
1、随机产生在任意的地方
2、随机的大小
3、随机的颜色
4、随机的运动速度
5、随机的运动方向
//OK，以上可以看出，它具备五个随机的属性，那么我就定义一个随机函数放在那，以后随时用到随时调用，已达到结构的最优化。
// 定义一个随机数,产生（min,max）范围内的随机数
function randFn (min,max){
return parseInt(Math.random()*(max-min)+min)
}
// 下面我们需要创建构造函数，由构造函数获取小球对象
function Boll (){
// 小球的尺寸(大小)
var wh = ranFn(20,50);
this.width = wh;
this.height = wh;
// 小球的初始坐标，即从哪个地方出现小球
this.left = randFn(0,document.body.offsetWidth-wh);
this.top = randFn(0,document.body.offsetHeight-wh);
//有人可能对上面的“document.body.offsetWidth-wh”代码不是很明白 。document.bady.offsetWidth是什么意思呢？就是拿页面可视距离（边框的距离）减去小球的距离就是允许小球出现的距离。附图一张，上下距离一样的理解方式。
// 我们继续构造小球对象 下面是随机颜色。注意，获取随机颜色一定要用rgbaXXXX的样式来获取。还要注意拼接不有漏了加号或引号和逗号。
this.color = 'rgba('+randFn(0,256)+','+randFn(0,256)+','+randFn(0,256)+','+Math.random()+')';
//小球的运动随机速度
this.speedX = randFn(-10,10) //横向移动 加载时可以随机的向左或向右移动
this.speedY = randFn(-10,10) //纵向移动 加载时可以随机的向上或向下移动
// 开辟属性，保存创建出来的DOM节点
this.div = document.createElement('div');
}
// 添加绘制小球的方法
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.left = this.left+'px';
this.div.style.top = this.top+'px';
this.div.style.backgroundColor = this.color;
//下面把创建好的标签拼接到文档流里去
var wrap = document.querySelector('#wrap');
wrap.appendChild(this.div);
}
// 设置定时器，设置判断条件，让小球在条件内运动
Boll.prototype.run = function(){
var self = this;
setInterval(function(){
//架设if判断边界情况
if(self.div.offsetLeft+self.div.offsetWidth>=document.body.offsetWidth || self.div.offsetLeft<0){
self.speedX *=-1;
}
if(self.div.offsetTop+self.div.offsetHeight>=document.body.offsetHeight||self.div.offsetTop<0){
self.speedY *=-1;
}
self.div.style.left = self.div.offsetLeft+self.speedX+'px'
self.div.style.top = self.div.offsetTop+self.speedY+'px'
},10)
}
// 好了 调用起来 试试吧
window.onload = function(){
for(var i= 0;i<100;i++{
var boll = new Boll()
boll.draw()
boll.run()
}
}
</script>
辛苦各位客官，谢谢。
