浏览器动态移动的小球源码分享

浏览器动态移动的小球源码分享 

<script>
	(function(a){
		  var width=100,height=100,borderRadius=100,
		  circle=function(){};
		  circle.prototype={
		  	  color:function(){
		  	  	let colour =  "#"+Math.floor(Math.random()*255).toString(16)
		  	  			+Math.floor(Math.random()*255).toString(16)
		  	  			+Math.floor(Math.random()*255).toString(16)
		  	  			console.log(colour);
		  	  	return colour;
		  	  },
		  	  drawCircle:function(clientX,clientY){
		  	  	let ele = document.createElement("div");
		  			 		let colo=new circle().color();
		  			 		ele.style.width=width+"px";
		  			 		ele.style.height=height+"px";
		  			 		ele.id="id_"+new Date().getTime();
		  			 		ele.style.borderRadius=borderRadius+"px";
		  			 		ele.style.position="absolute";
		  			 		ele.style.top=clientY+"px";
		  			 		ele.style.left=clientX+"px";
		  			 		ele.style.boxShadow= "0 3px 8px "+colo+", 0 0 76px "+colo+" inset";
		  			 		document.body.appendChild(ele);
		  			 		var maxWidth = document.body.clientWidth;
								var maxHeight = document.body.clientHeight;
								let way = Math.floor(Math.random()*3);
								localStorage.setItem(ele.id,"1");
		  			 		setInterval(function(){
		  			 				let flag = localStorage.getItem(ele.id);
		  			 				let o = document.getElementById(ele.id);
		  			 				let y ;
		  			 			  let x ;
		  			 			  
		  			 			  if(flag=="1"){
		  			 			  	 y = (new Number(o.style.top.replace("px",""))+1);
		  			 			  	 x = (new Number(o.style.left.replace("px",""))+1);
		  			 			  	 if(y>=maxHeight-100 || x>= maxWidth-100){
		  			 			  	 		localStorage.setItem(ele.id,"0");
		  			 			  	 }
		  			 			  }else{
		  			 			  	 y = (new Number(o.style.top.replace("px",""))-1);
		  			 			  	 x = (new Number(o.style.left.replace("px",""))-1);	
		  			 			  	 if(y<=0 || x<= 0){
		  			 			  	 		localStorage.setItem(ele.id,"1");
		  			 			  	 }
		  			 			  }
		  			 			  
		  			 			  console.log(x,y);
		  			 			  if(way==0){
			  			 				o.style.top=y+"px";
			  			 				o.style.left=x+"px";
			  			 			}else if(way==1){
			  			 				o.style.left=x+"px";
			  			 			}else if(way==2){
			  			 				o.style.top=y+"px";
			  			 			}
		  			 		},10);
		  	  },
		  		drow:function(obj){
		  			 obj.addEventListener("click",function(e){
		  			 		new circle().drawCircle(e.clientX,e.clientY);
		  			 })
		  		},
		  		autoDraw:function(){
		  			setInterval(function(){
		  					var maxWidth = document.body.clientWidth;
								var maxHeight = document.body.clientHeight;
		  				  let clientX=Math.floor(Math.random()*maxWidth);
		  				  let clientY=Math.floor(Math.random()*maxHeight);
		  					new circle().drawCircle(clientX,clientY);
		  			},1000)	;
		  		}
		  },
		  Rander=function(){
		  	return new circle();
		  },
		  R=function(obj){
		  	Rander().drow(obj);
		  	Rander().autoDraw();
		  }
			onload=R(a);
	})(window)
</script>

效果图