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

向右看齐 2021-09-15 17:46 388阅读 0赞

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