<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="UTF-8"> | |
<title></title> | |
<style type="text/css"> | |
*{margin: 0;padding: 0;} | |
html,body{width: 100%;height: 100%;} | |
#wrap{width: 100%;height: 100%;background: black;position: relative;} | |
.boll{border-radius: 50%;position: absolute;} | |
</style> | |
</head> | |
<body> | |
<div id="wrap"></div> | |
</body> | |
<script type="text/javascript"> | |
var wrap = document.querySelector('#wrap'); | |
//随机函数 | |
function randFN(min,max){ | |
return parseInt(Math.random()*(max - min) + min); | |
} | |
//构造函数 | |
function Boll(w,h,t,l,c){ | |
var wh = randFN(20,50); | |
this.width = w||wh + 'px'; | |
this.height = h||wh + 'px'; | |
this.top = t||randFN(0,document.body.offsetHeight - wh) + 'px'; | |
this.left = l||randFN(0,document.body.offsetWidth - wh) + 'px'; | |
this.color = c||'rgba('+ randFN(0,256) +','+ randFN(0,256) +',' + randFN(0,256) + ',' + Math.random().toFixed(2) +')'; | |
this.speedX = randFN(5,10); | |
this.speedY = randFN(3,7); | |
this.div = document.createElement('div'); | |
} | |
Boll.prototype.draw = function(){ | |
this.div.className = 'boll'; | |
this.div.style.width = this.width; | |
this.div.style.height = this.height; | |
this.div.style.left = this.left; | |
this.div.style.top = this.top; | |
this.div.style.background = this.color; | |
wrap.appendChild(this.div); | |
} | |
Boll.prototype.run = function(){ | |
var self = this; | |
window.setInterval(function(){ | |
if(self.div.offsetLeft + self.div.offsetWidth >= wrap.offsetWidth || self.div.offsetLeft < 0){ | |
self.speedX *= -1; | |
} | |
if(self.div.offsetTop + self.div.offsetHeight >= wrap.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'; | |
},30); | |
} | |
for (var i = 0; i < 20; i++) { | |
var boll = new Boll(); | |
boll.draw(); | |
boll.run(); | |
} | |
// window.setInterval(function(){ | |
// | |
// this | |
// | |
// | |
// },30); | |
</script> | |
</html> | |
躁动的小球
最新推荐文章于 2021-05-27 05:27:48 发布