JS基础之DOM操作增删改查的操作

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.wrap{
			width: 500px;
			height: 50px;
			background-color: #DAD699;
			text-align: center;
			margin:0 auto;
			margin-top:20px;
		}
		input{
			background-color: #D2BEF4;
			width: 19%;
			height: 90%;
			border-radius: 5px;
			margin-top:2px;

		}
		.content{
			width: 600px;
			border:2px solid;

		}
		.numtext{
			width: 600px;
			padding-top: 10px;
		}
	</style>
</head>
<body>
	<div class="content">
		<div class="wrap">
			<input type="button" value="添加">
			<input type="button" value="删除">
			<input type="button" value="大于0">
			<input type="button" value="小于0">
			<input type="button" value="刷新">
		</div>
		<div class="numtext"></div>
	</div>
	
</body>
<script>
	//获取元素
	var inps = document.querySelectorAll("input");
	var content = document.querySelector(".content");
	var numtext = document.querySelector(".numtext");
	//用来存储已经创建的元素
	var numsArr = [];
	//定义一个数组
	var arr=["-","+"]
	//添加的点击事件
	inps[0].onclick = function(){
		//创建box
		var box = document.createElement("div");
		//得到一个随机数
		var num = parseInt(Math.random()*100+1);
		//随机一个arr数组的的下标
		var a = parseInt(Math.random()*2);
		
		if(arr[a]=="-"){
			num =Number(arr[a]+num);
		}

		//为box设置样式
		box.style.width="500px";
		box.style.height="100px";
		box.style.backgroundColor="#D2BEF4";
		box.style.margin="5px auto";
		box.style.fontSize="50px";
		box.style.lineHeight="100px";
		box.style.textAlign="center";

		//把num写入box中
		box.innerHTML += num;
		//将box添加到numtext中
		numtext.appendChild(box);
		//存储
		numsArr.push(box);

		console.log(numsArr);

	}	
  	//删除的点击事件
  	inps[1].onclick = function(){
  		var a = numtext.lastElementChild;
  		if(numtext.hasChildNodes()){
  			a.remove();
  			//删除数组中的最后一个
  			numsArr.pop();
  		}
		

  	}

  	//大于0的点击事件
  	inps[2].onclick = function(){
  		var nums = numtext.children;
  		console.log(nums);
  		for(var i=0;i<nums.length;i++){
  			if(nums[i].innerHTML<0){
  				nums[i].style.display="none";
  			}else{
  				nums[i].style.display="block";
  			}
  		}
  	}




  	// 小于0的点击事件
  	inps[3].onclick = function(){
  		var nums  = numtext.children;
  		for(var i=0;i<nums.length;i++){
  			if(nums[i].innerHTML>0){
  				nums[i].style.display="none";
  			}else{
  				nums[i].style.display="block";
  			}
  		}
   }

  	//刷新的点击事件
  	inps[4].onclick=function(){
  		var nums = numtext.children;
  		for(var i=0;i<nums.length;i++){
  			nums[i].style.display="block";
  		}
  	}



</script>

</html>
JS基础之DOM操作增删改查的操作

猜你喜欢
