JS经典基础案例,对话框

输入框中没有输入东西的时候按钮式是橘色的,不能点击,当有东西输入的时候按钮立马变成粉色,并且点击提交之后,会在下面生成一个信息框,点击右上角的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>

JS经典基础案例,对话框

猜你喜欢