JavaScript实现简单留言版

最新推荐文章于 2022-06-14 19:17:23 发布

愁白了少年头

最新推荐文章于 2022-06-14 19:17:23 发布

阅读量568

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/qq_44075557/article/details/103170543

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			.wp{
				border: 1px #1B1B1B solid;
				height: 600px;
				width: 500px;
				margin: 20px auto;
				position: relative;
				background: url(bg.jpg);
				background-size: 100% 100%;
				/*border-radius: 5%;*/
				
			}
			#window{
				width: 500px;
				height: 300px;
				border-bottom: 1px #B3D4FC solid;
				position: absolute;
				top: 0;
				left: 0;
				overflow: auto;
			}
			#txt{
				position: absolute;
				bottom: 40px;
				left: 0;
				height: 200px;
				border-top: 1px #0077AA solid;
				width: 100%;
				cursor: pointer;
				font-size: 20px;
				background: #888888;
				/*border-radius: 10%;*/
			}
			#btn{
				width: 80px;
				height: 40px;
				position: absolute;
				bottom: 0;
				right: 20px;
			}
			#window li{
				list-style-type: none;
				font-size: 20px;
				margin-top: 10px;
				border: 1px #444444 solid;
				color: #FFFFFF;
				height: 40px;
				line-height: 40px;
				
			}
			#window input{
				float: right;
				height: 40px;
				width: 80px;
			}
			input:hover{
				background: #F00000;
				color: #FFFFFF;
				border: 0;
			}
		</style>
	</head>
	<body>
		<div class="wp">
			<div id="window">
			<!--	<li>1</li>-->
			</div>
			<textarea id="txt" value="1"></textarea>
			<input type="button" id="btn" value="发送" />
		</div>
	</body>
	<script type="text/javascript">
		var txt1=document.getElementById("txt");
		var btn=document.getElementById("btn");
		
		btn.onclick=function(){
			var txt2=document.getElementById("txt").value;
			var txt=txt2.trim();
			if(txt!=''){
//			console.log(txt.value);
var win=document.getElementById("window");
//创建一个新的li
var gg=document.createElement('li');
//创建一个新的文本节点
var ggText=document.createTextNode(txt);
//将文本节点添加到li中
gg.appendChild(ggText);
//将li添加到win中，用来显示
   win.appendChild(gg);
// console.log(txt1.value);
   txt1.value='';
   var btn2=document.createElement('input');
   btn2.type='button';
   btn2.value='删除';
   gg.appendChild(btn2);
   btn2.onclick=function(){
   var cor=confirm('你确定删除吗？');
   if(cor){
     var en=this.parentNode;       
     console.log(en);
    en.parentNode.removeChild(en);
   }
   }
   }else{
			alert('输入不能为空！');
   }
		}
	</script>
</html>