DOM在内容区域内的弹球

本文章写了点击一下按钮弹出球在内容区域内滚动

主要是进行js的练习
点击按钮触发一个弹球的运动
根据随机函数获取不同大小的球不同的运动轨迹以及速度的不同

在内容区域内通过createelement创建字点
给节点css属性
再父元素下添加子节点appendchild
利用定时器每10毫秒触发一次定时器来改变距离从而形成动画效果
碰到内容区域外则通过if条件语句来求反改变方向
offsetwidth 可见内容宽度包括padding、边框
clientwidth 可见内容宽度包括padding、不包括边框等

删除动画
第一种方法：
直接将父元素的内容清空
innertext=“”;

第二种方法：
点击按钮触发事件
将dv下的childnodes给一个数组
倒序循环removechild子节点

html

<input type="button" value="弹出滚动球" id="b">
		<input type="button" value="清除滚动球" id="clear">
		<div id="dv">

		</div>

css

```javascript
<style>
		#dv {
			position: relative;
			width: 800px;
			height: 600px;
			left: 50%;
			top: 50%;
			margin-left: -400px;
			background-color: darkgray;
		}
	</style>

js

<script>
			let clear=document.getElementById("clear");
			let dv = document.getElementById("dv");
			let b = document.getElementById("b");
			let colors=["pink","blue","yellow","red","orange"];
			b.onclick = function() {
				let div = document.createElement("div");
				div.style.cssText = "position: absolute;border-radius: 50%;";
				var wh=Math.floor(Math.random()*50)+30;
				div.style.height = wh+"px";
				div.style.width = wh+"px";
				div.style.backgroundColor = colors[Math.floor(Math.random()*colors.length)];
              
				dv.appendChild(div);
				let top = dv.clientHeight / 2 - div.offsetHeight / 2;
				let left = dv.clientWidth / 2 - div.offsetWidth / 2;
				var x =Math.floor(Math.random()*10)+1;
				var y =Math.floor(Math.random()*10)+1;

				setInterval(function() {
					top += y;
					left += x;

					if(top < 0 || top > (dv.clientHeight - div.offsetHeight)) {
						y= -y;	
					}
					if(left < 0 || left > (dv.clientWidth - div.offsetWidth)) {	
						x=- x;
					}
					div.style.top = top + "px";
					div.style.left = left + "px";
				}, 10)

			}
			clear.onclick=function(){
//				dv.innerText="";//第一种方式删除所有子节点
                let nodes=dv.childNodes;//获取到dv下面的所有子节点，用removechild循环删除子节点。正序比较难删干净
                for(let i=nodes.length-1;i>=0;i--){
                	dv.removeChild(nodes[i]);
                }
			}
		</script>