JS经典基础案例,对话框

客官°小女子只卖身不卖艺 2021-09-15 17:42 253阅读 0赞

输入框中没有输入东西的时候按钮式是橘色的,不能点击,当有东西输入的时候按钮立马变成粉色,并且点击提交之后,会在下面生成一个信息框,点击右上角的x号,可以删除那条信息框

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		.wrap{
    			width: 800px;
    			/*height: 1500px;*/
    			border:3px solid ;
    			margin:0 auto;
    			padding-bottom: 20px;
    		}
    		textarea{
    			display: block;
    			width: 90%;
    			height: 300px;
    			border:5px solid pink;
    			margin:0 auto;
    			margin-top:50px;
    
    			outline: none;
    
    		}
    		input[type="button"]{
    			display: block;
    			background-color: pink;
    			width: 80px;
    			height: 30px;
    			margin-left: 40px;
    			margin-top: 20px;
    		}
    	</style>
    </head>
    <body>
    	<div class="wrap">
    		<textarea  cols="30" rows="10" id="content"></textarea>
    		<input type="button" value="提交">
    	</div>
    </body>
    <script>
    	//获取元素
    	var inp = document.querySelector("input");
    	var text = document.getElementById("content");
    	var wrap = document.querySelector(".wrap");
      //点击事件
    	inp.onclick = function(){
    		//当文本框中输入不为空时
    		if(text.value!=""){
    			console.log(text.value);
    			//创建一个对话框
    			var dialog = document.createElement("div");
    			//为对话框设置样式
    			dialog.style.width="85%";
    			dialog.style.border="3px solid pink";
    			dialog.style.backgroundColor="#A3DAC1";
    			dialog.style.marginLeft="40px";
    			dialog.style.marginTop="10px";
    			dialog.style.position="relative";
    			dialog.style.borderRadius="5px";
    			//设置换行,中文是默认可以换行的,英文需要设置
    			dialog.style.wordWrap="break-word"
    			dialog.style.padding="20px";
    			//将对话框添加到wrap的子级中
    			wrap.appendChild(dialog);
    
    			 //将获取到的value添加到对话框中
    			dialog.innerHTML+=text.value;
    					
    			//创建删除的按钮
    			var d = document.createElement("div");
    			//为删除按钮设置样式
    			d.style.width="15px";
    			d.style.height="15px";
    			d.innerHTML="X";
    			d.style.position="absolute";
    			d.style.top="0px";
    			d.style.right="0px";
    			d.style.cursor="pointer";
    			//将删除按钮添加到对话框中
    			dialog.appendChild(d);
    			console.log(d);
    			console.log(dialog);
                
                //将value置空
    			text.value="";
    
    			//当点击删除按钮时删除对话框
    			d.onclick = function(){
    				dialog.remove();
    			} 
    		}
    	}
    
    	setInterval(function(){
    			if(text.value){	
    				inp.style.backgroundColor="#F49D9A";
    				inp.disabled=false;
    			}else{
    				inp.style.backgroundColor="#F4D6B4";
    				inp.disabled=true;
    			}
    		},10);
    </script>
    </html>

![70][]

[70]: /images/20210813/1e16e83b28944c30b348db1117d6b507.png