JS之每点击div其中就生成一个随机背景色的小球,并在写div中做无规则运动

一时失言乱红尘 2021-09-15 17:50 301阅读 0赞

![70][]

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    </head>
    <body>
    	
    </body>
    <script>
    	//创建一个div
    	var div = document.createElement("div");
    	//将div写入body中
    	document.body.appendChild(div);
    	//为div设置样式
    	div.style.width="800px";
    	div.style.height="400px";
    	div.style.position="relative";
    	div.style.border="1px solid red";
    	
    	
    	//div的点击事件
    	div.onclick = function(){
    		//创建一个box
    		var box = document.createElement("div");
    		//随机颜色
    		var r = parseInt(Math.random()*256);
    	    var g = parseInt(Math.random()*256);
    	    var b = parseInt(Math.random()*256);
    	    //为box设置样式
    		box.style.width="20px";
    		box.style.height="20px";
    		box.style.borderRadius="50%";
    		box.style.position="absolute";
    		box.style.left="0px";
    		box.style.top="0px";
    	    box.style.backgroundColor="rgb("+r+","+g+","+b+")";
    	    //将box作为div的子集写入
    	    div.appendChild(box);
    
    	    //随机一个沿着x轴移动的初始值
    	    var speedX=parseInt(Math.random()*10+1);
    	    console.log(speedX);
    	    //随机一个沿着y轴移动的初始值
    	    var speedY=parseInt(Math.random()*10+1);
    	    console.log(speedY);
    
    	    //获得当前box的left值
    	    var nowLeft = box.offsetLeft;
    	    console.log(nowLeft);
    	    //获得当前box的top值
    	    var nowTop = box.offsetTop;
    	    console.log(nowTop);
    	    //获得小球x轴最大的移动距离
    	    var maxWidth=div.offsetWidth-box.offsetWidth;
    	    console.log(maxWidth);
    	    //获得小球y轴最大的移动距离
    	    var maxHeight=div.offsetHeight-box.offsetHeight;
    	    console.log(maxHeight);
    	    	
    	    //计时器进入循环
    	    setInterval(function(){
    	    	console.log(nowLeft);
    	    	//改变小球的left值
    	    	nowLeft+=speedX;
    	    	//当小球到达最右边时,获得的速度需要变为负值
    		    if(nowLeft>=maxWidth){
    		    	 speedX=parseInt(Math.random()*10+1);
    	    		speedX=-speedX;
    	    	}
    	    	//当小球再次到达最左边的时候,获得的速度是正值
    	    	if(nowLeft<=0){
    	    		 speedX=parseInt(Math.random()*10+1);
    	    	}
    	    	//为小球设置left值
    	    	box.style.left=nowLeft+"px";
    
    	    	//改变小球的top值
    	    	nowTop+=speedY;
    	    	//当小球到达最底部的时候,速度变成负值
    	    	 if(nowTop>=maxHeight){
    		    	 speedY=parseInt(Math.random()*10+1);
    	    		speedY=-speedY;
    	    	}
    	    	//当小球再次到达最顶部小球的速度为正值
    	    	if(nowTop<=0){
    	    		 speedY=parseInt(Math.random()*10+1);
    	    	}
    	    	//为小球设置top值
    	    	box.style.top=nowTop+"px";
    
    	    },30);
    
    	}
    
    
    
    
    </script>
    </html>

[70]: /images/20210813/ca884119c9174284b0395cb7a360e9ca.png