躁动的小球

最新推荐文章于 2021-05-27 05:27:48 发布

Tony_Liu0611

最新推荐文章于 2021-05-27 05:27:48 发布

阅读量361

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/Tony_Liu0611/article/details/52146064

javascript 专栏收录该内容

9 篇文章

订阅专栏

	<!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>