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

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

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

效果图