简易的 js 留言板

最新推荐文章于 2022-08-26 11:59:07 发布

初仔仔

最新推荐文章于 2022-08-26 11:59:07 发布

阅读量848

点赞数

CC 4.0 BY-SA版权

文章标签： c/c++ javascript ViewUI

原文链接：http://www.cnblogs.com/nanxi-zwj/p/6124398.html

本文分享了一个简单的留言板实现案例，包括HTML布局、CSS样式及JavaScript交互代码。通过动态生成DOM元素实现了留言和评论功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

没事做的一个小玩意，练练手。大神勿喷，有些不会写的，希望大神指教。

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>留言板</title>
	<link rel="stylesheet" href="dist/css/note.css" />
	<link rel="stylesheet" href="dist/css/bootstrap.min.css" />
</head>
<body>
	<nav id="main">
	    <div id="content">
		<header>
			<h3 class="text">留言板</h3>
		</header>
		<textarea id="liuyan"></textarea> 
		<button class="btn btn-warning button" id="reset">重置</button>
		<button class="btn btn-primary button">提交</button>
		<h3><span class="carea">评论区</span></h3>
		<div id="box">		
		</div>
	    </div>
	</nav>
	<script type="text/javascript" src="dist/js/note.js"></script>
</body>
</html>

CSS代码：

#main{
	width: 800px;
	margin: 0 auto;
	border-left: 1px solid #808080;
	border-right: 1px solid #808080;
}
#content{
	width: 700px;
	margin: 0 auto;
}
header{
	text-align: center;
}
.text{
	height: 30px;
	line-height: 30px;
	font-weight: bold;
	background: linear-gradient(90deg,#f44,#ccff77)
}
textarea#liuyan{
	display: block;
	width: 700px;
	height:100px;
	font-size: 20px;
	font-family: "微软雅黑";
}
.button{
	display: inline-block;
	position: relative;
	left:496px;
	margin-top: 5px;
	width: 100px;
	height: 40px;
}
.show{
	display: block;
}
.hidden{
	display: none;
}
.box{
	margin-top: 20px;
	display: block;
	width: 700px;
	height:100px;
	font-size: 20px;
	font-family: "微软雅黑";
	border-top:1px solid #e8e8e8;
	border-bottom: 1px solid #e8e8e8;
	position: relative;
}
.img{
	width: 30px;
	height: 30px;
	border-radius: 15px;
	position: relative;
	top:38%;
	margin-right: 30px;
}
.remove{
	display: inline-block;
	position: absolute;
	top:70px;
	left:650px;
	cursor: pointer;

}
.floor{
	position: absolute;
	top:0px;
	left:5px;
	color:blue;
}
.comment{
	display: inline-block;
	position: absolute;
	top:70px;
	left:600px;
	cursor: pointer;
}
.textarea{
	position: absolute;
	width: 300px;
	height:50px;
	top:48px;
	left: 200px;
	font-size: 14px;
}
.subcom{
	position: absolute;
	top:48px;
	left:500px;
	height: 50px;
}
.carea{
	display: block;
	border-radius: 2px;
	background: tan;
	box-shadow: 0 0 0 2px #655;
	outline: 2px solid #655;
	margin: 0 auto;
	width: 72px;
}
.box{
	background: url(../../pngs/2.jpg) repeat;
	background-attachment: fixed;
}
.acom{
	display: block;
}
.comarea{
	width: 600px;
	border: 2px solid #428bca;
	margin-left: 100px;
}
.rem{
	cursor: pointer;
}

JS代码：

window.onload = function() {
	var nr = document.getElementById('content');
	var obox = nr.children[4];
	var otxt = nr.children[1];
	var obtnR = nr.children[2];
	var obtnS = nr.children[3];
	var n = 0;

	obtnS.onclick = function() {
		n++;
		var str = otxt.value;
		if (str.length != 0) {
			var oP = document.createElement('p'); //创建P元素
			var oB = document.createElement('b'); //创建b元素
			var oImg = document.createElement('img'); //创建一张图片
			var oSpan = document.createElement('span'); //创建span元素
			var oSpanS = document.createElement('span'); //创建span元素
			var comment = document.createElement('a') //创建a元素
			var oA = document.createElement('a'); //创建a元素
			var aP = obox.appendChild(oP); //把 op 放进 obox 里面
			var aImg = oP.appendChild(oImg); //把 img 放进 obox 里面
			var aB = oP.appendChild(oB); //把 ob 放进 oP 里面
			var aSpan = oP.appendChild(oSpan); //把 ospan 放进 op 里面
			var aA = oSpan.appendChild(oA); //把 aA 放进 oSpan 里面
			var aSpanS = oP.appendChild(oSpanS);
			var acomment = oSpan.appendChild(comment); //把 comment(评论) 放进ospan 里面
			aP.className = 'box';
			aB.innerHTML = str;
			aA.innerHTML = '删除';
			aA.className = 'remove';
			acomment.innerHTML = '评论';
			acomment.className = 'comment';
			aSpanS.className = 'floor';
			aSpanS.innerHTML = n + 'L';
			otxt.value = "";
			aImg.className = 'img';
			aImg.src = "pngs/1.jpg";
			alert('留言成功！');
		} else alert('内容不能为空')
		aA.onclick = function() {
			n--;
			var nowP = this.parentNode.parentNode; // 当前p元素
			obox.removeChild(nowP);

			// for (i = 0;i<n;n++){
			// 	if(obox.children[i] != nowP){

			// 	}
			// }
			//未完成的 判断楼层数。

		}
		var reset = nr.children[2];
		reset.onclick = function() {
			otxt.value = "";
		}
		acomment.onclick = function() {
			var oArea = document.createElement('textarea');
			var aArea = oSpan.appendChild(oArea);
			aArea.className = 'textarea';
			var oBtn = document.createElement('button')
			var aBtn = oSpan.appendChild(oBtn);
			aBtn.innerHTML = '提交';
			aBtn.className = 'subcom';
			aBtn.onclick = function() {
				oSpan.removeChild(this);
				oSpan.removeChild(aArea);
				var Sstr = oArea.value;
				var pCom = document.createElement('p');
				var paCom = obox.appendChild(pCom);
				var oCom = document.createElement('span');
				var aCom = pCom.appendChild(oCom);
				var oRem = document.createElement('a');
				var aRem = pCom.appendChild(oRem);
				aRem.innerHTML = '删除该评论';
				aRem.className = 'rem';
				aCom.innerHTML = Sstr;
				aCom.className = 'acom';
				paCom.className = 'comarea';
				aRem.onclick = function() {
					pCom.removeChild(this);
					pCom.removeChild(aCom);
					paCom.className = '';
				}
			}
		}
	}
}

//该代码评论功能还不完善.正在改进。

　效果图：