在HTML里建一个div，id="wrap"
css样式
*{
margin:0;
padding:0;
}
body,html{
height:100%;
}
#wrap{
height:100%;
background-color:black;
position:relative;
overflow:hidden;
}
.ball{
border-radius:50%;
position:absolute;
}
js代码
//工具函数，产生[min,max)范围内的随机数
functionrandFn(min,max){
returnparseInt(Math.random()*(max-min)+min);
}
//创建构造函数，由构造函数获取小球对象
functionBoll(){
//小球的尺寸：随机数
varwh = randFn(20,50);
this.width= wh; //width不是css中的，只是容器
this.height= wh;
//小球初始坐标点
this.left= randFn(0,document.body.offsetWidth-wh);
this.top= randFn(0,document.body.offsetHeight-wh);
//小球颜色：随机
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");
}
//添加绘制小球的方法
Ball.prototype.draw= function(){
this.div.className= "ball";
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;
//把标签拼接进文档流
varwrap = document.querySelector("#wrap");
wrap.appendChild(this.div);
}
Boll.prototype.run= function(){
varself = this;
setInterval(function(){
//this指向window
//判断边界情况
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(vari=0;i<100;i++){
varball = new Ball();
ball.draw();
ball.run();
}
}
网友评论