js DOM弹球

js DOM弹球

html和css

## css

<style>
			button {

				margin: 0 100px;
			}

			#container {
				width: 300px;
				height: 300px;
				margin: 50px auto;
				background-color: #fff;
				border: 1px solid #000;
				position: relative;
			}
			.ball{
				position: absolute;
				width: 20px;
				height:20px;
				border-radius: 50%;
			}
		</style>
	```

```html
## html
		<button type="button" id="add">添加球</button>
		<div id="container">
		</div>

<script type="text/javascript">
			// 获取元素
			let btn = document.getElementById('add');
			let container =document.getElementById('container');
			// 颜色数组
			let colorArray =['red','blue','green','yellow','black'];
			btn.addEventListener('click',function(){
				// 创建ball
				let ball = document.createElement('div');
				// 随机生成颜色
				let i = Math.floor((Math.random()*40)%4);
				// 加入样式
				ball.className = 'ball'
				ball.style.backgroundColor = colorArray[i];
				// 加入进div盒子中
				container.appendChild(ball);
				// 设置ball的初始位置,中间
				let left = container.clientWidth/2-ball.offsetWidth/2,top= container.clientHeight/2-ball.offsetHeight/2;
				// 随机设置x，y速度
				let x=Math.floor(Math.random()*20),y=Math.floor(Math.random()*20);
				// 定时器
				setInterval(function(){
					left=left+x;
					top=top+y;
					// 设置限制条件
					// 当左侧小于0，或者已经出了div框，就反向，top同理
					if(left<0||left>(container.offsetWidth-ball.offsetWidth)){
						x=-x
					}
					if(top<0||top>(container.offsetHeight-ball.offsetHeight)){
						y=-y
					}
					// 设置ball的位移
					ball.style.left=left+'px';
					ball.style.top=top+'px';
				
				},30)
			})
		</script>

总结

**这个练习主要考察的是获取DOM的宽高
这里是别人整理链接：*https://www.cnblogs.com/itdansan/p/8116273.html***