实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>0709-3:防网易留言板</title>
</head>
<style>
*{ outline:none }
body{
font-family:"微软雅黑"; font-size:0.9rem; background-color: #ddd
}
ul,li{ list-style:none}
button{ cursor:pointer }
/*贴子主体*/
#post-box { margin:0 auto; width: 700px; min-height: 700px; background-color: #fff; padding: 25px; }
#slogan { width: 100%; background-color:#f1f7fc; line-height: 34px; margin-bottom:20px}
#slogan span{ display:block; text-align:center; font-size:1rem; color:#666666}
/*发贴框*/
#post-enter{width:100%; margin:0 auto 30px auto; border:1px solid #b1c6df}
#post-enter textarea{ border: 0}
#post-enter-username{ height:60px; background-color:#f1f7fc; border-top:1px solid #b1c6df}
#post-enter-username li { width: 45%;padding: 4px; float:left; text-align:right}
/*内容框*/
#post-content-box{ overflow:hidden; margin: 20px auto 0 auto}
.post-content{overflow: hidden; box-sizing: border-box; margin-bottom: 20px; border-bottom:1px dashed #aaa}
#post-content-box .post-content-binfo{ height: 40px; overflow: hidden; margin: 0 auto}
#post-content-box .post-content-username{ float:left; padding: 8px 10px}
#post-content-box .post-content-username span{color: #1e50a2; font-size:0.9rem }
#post-content-box .post-content-levelnum{ float: right}
#post-content-box .post-content-levelnum em{ font-size:0.8rem}
#post-content-box .post-contentfloor-text {padding: 4px 10px}
#post-content-box .post-content-operation{ height: 40px }
#post-content-box .post-content-operation li{ float: right; width: 60px }
/*内容框层*/
.post-contentfloor{
box-sizing: border-box;
width: 99% ;padding: 8px;
background-color:#ffffee;
border: 1px solid #999999;
overflow: hidden;
margin: 0 auto;
}
.post-contentfloor .post-contentfloor-binfo{ height: 40px; line-height: 40px; overflow: hidden}
.post-contentfloor .post-contentfloor-username{ float:left}
.post-contentfloor .post-contentfloor-username span{color: #1e50a2; font-size:0.9rem }
.post-contentfloor .post-contentfloor-levelnum{ float: right}
.post-contentfloor .post-contentfloor-levelnum em{ font-size:0.8rem}
.post-contentfloor .post-contentfloor-operation{ height: 40px; overflow: hidden }
.post-contentfloor .post-contentfloor-operation li{ float: right; width: 70px }
.post-content-text { padding: 8px 10px; width: 98%}
/*回复框*/
.post-reply-box{width:95%; margin:0 auto 30px auto; border:1px solid #b1c6df; display:none}
.post-reply-box textarea{ border: 0; width: 99%}
.post-reply-username{ height:60px; background-color:#f1f7fc; border-top:1px solid #b1c6df}
.post-reply-username li { width: 45%;padding: 4px; float:left; text-align:right}
.reply-hidden{ display:block }
</style>
<script>
window.onload = function(){
//获取发贴框节点
var postEnter = document.getElementById("post-enter");
//获取发贴Enter节点
var enterBtn = document.getElementById("post-enter-button");
//获取发贴框内容节点
var postEnterContent = document.getElementById("post-enter-content");
//获取发贴框用户名节点
var postUsername = postEnter.getElementsByClassName("post-username")[0];
//获取贴子内容主框架节点
var postContentBox = document.getElementById("post-content-box");
//获取贴子内容主框架 用户信息节点
var postContentBinfo =postContentBox.getElementsByClassName("post-content-binfo")[0];
//获用户名
// var postContentUsername = postContentBinfo.getElementsByClassName("post-content-username")[0];
//监听发贴框行为
postEnter.addEventListener("click",enterBtn_FN,false);
function enterBtn_FN(e){
//判断点击是否为Enter按钮
if(e.target.id == "post-enter-button"){
//求取用户名和发贴内容
var postUsernameValue = postUsername.value;
var postEnterContentValue = postEnterContent.value;
//清空用户名和内容
postUsername.value = "";
postEnterContent.value ="";
//判断发贴框用户名和内容是否为空
if(postUsernameValue == "" || postEnterContentValue == ""){
alert("用户名和内容都不能为空");
}else{
//转到处理用户名、内容函数
postHandle_FN(postUsernameValue, postEnterContentValue);
}
}
}
//处理发贴用户名和内容函数 开始
function postHandle_FN(postUsername, postEnterContentValue){
//创建DIV元素postContentBoxAddDiv
var postContentBoxAddDiv = document.createElement("div");
//给新创建的元素postContentBoxAddDiv增加样式
postContentBoxAddDiv.classList.add("post-content");
//给新创建的元素postContentBoxAddDiv增加HTML内容
postContentBoxAddDiv.innerHTML ="<div class='post-content-binfo'>"+
"<div class='post-content-username'><span>"+postUsername+"</span></div>"+
"<div class='post-content-levelnum'><em></em></div>"+
"</div>"+
"<div class='post-content-text'>"+
"<span>"+postEnterContentValue+"</span>"+
"</div>"+
"<div class='post-content-operation'>"+
"<ul><li><button class='reply-del'>删除</button></li><li><button class='reply-btn'>回复</button></li></ul>"+
"</div>"+
"<div class=\"post-reply-box\">\n"+
"<textarea class=\"post-reply-content\"\n" +
"cols=\"92\" rows=\"10\" placeholder=\"文明社会 理性发贴\"></textarea>\n" +
"<div class=\"post-reply-username\">\n" +
"<ul>\n" +
"<li>\n" +
"<label>username:</label>\n" +
"<input type=\"text\" class=\"post-replyusername\" />\n" +
"</li>\n" +
"<li>\n" +
"<button class=\"post-reply-button\">replyEnter</button>\n" +
"</li>\n" +
"</ul>\n" +
"</div>\n" +
"</div>";
if(postContentBox.childElementCount == 0){
postContentBox.appendChild(postContentBoxAddDiv);
}else{
postContentBox.insertBefore(postContentBoxAddDiv,postContentBox.children[0]);
}
}
//处理发贴用户名和内容函数 结束
//监听贴子内容框行为
postContentBox.addEventListener("click",reply_FN,false);
//处理监听事件函数 开始
function reply_FN(e) {
//判断点击是哪个按钮
switch (e.target.className) {
case "reply-btn"://如果点的是打开回复框按钮
var ev = e.target;//获取当前活动节点值
// 寻找和回复框相同父节点post-content
var evParent = targetParent_FN(ev, "post-content");
//回复框节点集
var cpostReplyBox = evParent.getElementsByClassName("post-reply-box");
//设增减样式开关
cpostReplyBox[cpostReplyBox.length - 1].classList.toggle("reply-hidden");
if (e.target.innerText === "回复") {
e.target.innerText = "关回复";
} else {
e.target.innerText = "回复";
}
break;
case "post-reply-button"://如果点的是回复帖子按钮
var evr = e.target;//获取当前活动节点值
//寻找和回复框节点post-reply-box
var evrParent = targetParent_FN(evr, "post-reply-box reply-hidden");
//提取回复内容
var replyContent = evrParent.getElementsByClassName("post-reply-content")[0].value;
//提取回复用户名
var replayUsername = evrParent.getElementsByClassName("post-replyusername")[0].value;
if(replyContent == "" || replayUsername == ""){
alert("用户名或内容不能为空");
return false;
}
//获取回复框和被回复框父节点post-content
var replyParentPostContent = targetParent_FN(evr, "post-content");
//获取被回复用户名
var replyThisPostUname = replyParentPostContent.getElementsByClassName("post-content-username")[0].innerText;
//获取被回复内容
var replyThisPostContent = replyParentPostContent.getElementsByClassName("post-content-text")[0].innerText;
//交换位置
replyParentPostContent.getElementsByClassName("post-content-username")[0].innerText = replayUsername;
replyParentPostContent.getElementsByClassName("post-content-text")[0].innerText = replyContent;
//转到处理被回复内容和用户名函数
postReply_FN(evr, replyThisPostUname, replyThisPostContent);
//消除回复框用户名和内容
evrParent.getElementsByClassName("post-reply-content")[0].value = "";
evrParent.getElementsByClassName("post-replyusername")[0].value = "";
break;
case "reply-fr-btn":
var evrb = e.target;//当前节点
//获相同父节点post-contentfloor
var replyPostContentFloor = targetParent_FN(evrb, "post-contentfloor");
//回复框节点集
var fpostReplyBox = replyPostContentFloor.getElementsByClassName("post-reply-box");
//回复框显藏开关
fpostReplyBox[fpostReplyBox.length - 1].classList.toggle("reply-hidden");
if (e.target.innerText === "回复") {
e.target.innerText = "关回复";
} else {
e.target.innerText = "回复";
}
break;
case "post-reply-frbutton":
var evfrB = e.target;//获取当前节点
//查询父节点post-reply-box
var frpostReplyBox = targetParent_FN(evfrB,"post-reply-box reply-hidden");
//获取用户名和内容节点集
var frpostReplyUnames = frpostReplyBox.getElementsByClassName("post-frreplyusername");
var frpostContents = frpostReplyBox.getElementsByClassName("post-reply-content");
//获取回贴用户名和内容
var frpostReplyUname = frpostReplyUnames[frpostReplyUnames.length-1].value;
var frpostContent = frpostContents[frpostContents.length-1].value;
if(frpostReplyUname == "" || frpostContent==""){
alert("用户名和内容不能为空!!");
return false;
}
//获取该被回贴层父节点post-contentfloor
var frpostContentFloor = targetParent_FN(evfrB,"post-contentfloor");
//获取被回贴用户名和内容集
var frthispostReplyUnames = frpostContentFloor.getElementsByClassName("post-contentfloor-username");
var frthispostReplyContents = frpostContentFloor.getElementsByClassName("post-contentfloor-text");
//获取被回贴用户名和内容
var frthispostReplyUname = frthispostReplyUnames[frthispostReplyUnames.length-1].innerText;
var frthispostReplyContent = frthispostReplyContents[frthispostReplyContents.length-1].innerText;
//交换回贴和被回贴位置
frthispostReplyUnames[frthispostReplyUnames.length-1].innerText = frpostReplyUname;
frthispostReplyContents[frthispostReplyContents.length-1].innerText = frpostContent;
//转到处理回贴用户和内容函数（回贴层）
frpostReplyHandle_FN(evfrB,frthispostReplyUname,frthispostReplyContent);
//清空回贴框
frpostReplyBox.getElementsByClassName("post-frreplyusername")[0].value = "";
frpostReplyBox.getElementsByClassName("post-reply-content")[0].value = "";
break;
case "reply-del":
var evDel = e.target;//当前节点
//获取节点post-content
var evDelpostContent = targetParent_FN(evDel,"post-content");
//获取节点post-content节点下的所有子节点
var evDelpostContentchildNodes = evDelpostContent.childNodes;
//获取post-content节点的父节点post-content-box
var postContentBox = document.getElementById("post-content-box");
//判断是否有子节点post-contentfloor
if(evDelpostContent.children[1].className !== "post-contentfloor"){
//删除当前的post-content节点
postContentBox.removeChild(evDelpostContent);
}else{
//如果有post-contentfloor
var evDCChildrenFloor = evDelpostContent.children[1].getElementsByClassName("post-contentfloor");
if(evDCChildrenFloor.length == 0){//判断post-contentfloor下是否有子节点post-contentfloor
//交换两层用户名和内容的位置并删除post-contentfloor
evDelpostContent.children[0].children[0].innerHTML = evDelpostContent.children[1].children[0].children[0].innerHTML;
evDelpostContent.children[2].innerHTML = evDelpostContent.children[1].children[1].innerHTML;
evDelpostContent.removeChild(evDelpostContent.children[1]);
}else{//post-contentfloor下有子节点post-contentfloor
//交换两层用户名和内容的位置并把post-contentfloor的子节点删除，把子节点post-contentfloor的innerHTML附上来
evDelpostContent.children[0].innerHTML = evDelpostContent.children[1].children[1].innerHTML;
evDelpostContent.children[2].innerHTML = evDelpostContent.children[1].children[2].innerHTML;
var evDelpostFloorChild = evDelpostContent.children[1].children[0].innerHTML;
//删除post-contentfloor，然后用post-contentfloor下的子节点post-contentfloor代替
var evDelpostContentChildrens = evDelpostContent.children[1].childNodes;
// evDelpostContent.children[1].removeChild(op);
for (var i=0; i<evDelpostContentChildrens.length; i++){
evDelpostContent.children[1].removeChild( evDelpostContent.children[1].childNodes[i]);
}
evDelpostContent.children[1].innerHTML = evDelpostFloorChild;
}
}
case "reply-fr-del":
var evrFrDel = e.target;//获取当前节点
var evrFrDelpostCount = targetParent_FN(evrFrDel,"post-content");//获取post-coutent子节点
var evrFrpostContentFloorChilds;
var evrFrpostContentFloor = targetParent_FN(evrFrDel,"post-contentfloor");//获取节点post-contentfloor
//获取post-contentfloor子节点post-contentfloor
if(evrFrpostContentFloor.children[0].className === "post-contentfloor"){
evrFrpostContentFloorChilds = 1
}else{
evrFrpostContentFloorChilds = 0;
}
if(evrFrpostContentFloorChilds == 0 && evrFrpostContentFloor.parentElement.className==="post-content"){//判断是否有子节点post-contentfloor
evrFrDelpostCount.removeChild(evrFrDelpostCount.children[1]);
}else if(evrFrpostContentFloorChilds == 0 && evrFrpostContentFloor.parentElement.className==="post-contentfloor") {
evrFrpostContentFloor.parentElement.removeChild(evrFrpostContentFloor.parentElement.children[0]);
}else if(evrFrpostContentFloorChilds > 0 && evrFrpostContentFloor.parentElement.className==="post-contentfloor"){
//保存post-contentfloor节点下的子节点post-contentfloor HTML代码
var tempHTML = evrFrpostContentFloor.children[0].innerHTML;
//删除post-contentfloor的所有节点，
var evrFrDelpostCountChilds = evrFrpostContentFloor.parentElement.children[0].childNodes;
for(var i= 0; i<evrFrDelpostCountChilds.length; i++){
evrFrpostContentFloor.removeChild(evrFrpostContentFloor.childNodes[i]);
}
evrFrpostContentFloor.innerHTML = tempHTML;
}else if(evrFrpostContentFloorChilds > 0 && evrFrpostContentFloor.parentElement.className==="post-content"){
var tempHTML1 = evrFrpostContentFloor.children[0].innerHTML;
var evrFrDelpostCountChildNodes = evrFrDelpostCount.children[1].childNodes;
var CN = evrFrDelpostCount.children[1];
for(var i = 0; i<evrFrDelpostCountChildNodes.length;i++){
CN.removeChild(CN.childNodes[i]);
}
CN.innerHTML = tempHTML1;
}
}
}
//处理监听事件函数 结束
//寻找父节点函数
function targetParent_FN(ev,className){
// if(ev.parentElement.className === "end"){
// return undefined ;
// }
// 判断是否是目标节点
if(ev.parentElement.className === className){
return (ev.parentElement);
}else{
// console.log(ev.parentElement.nodeName+"===="+ev.parentElement.className);
var ev1 = ev.parentElement;
return targetParent_FN(ev1,className);//使用递归找寻
}
}
//处理回复内容和用户名函数 开始
function postReply_FN(e,replyThisPostUname,replyThisPostContent){
var evr = e;
//寻找此贴父节点post-content
var evrParentNode = targetParent_FN(evr,"post-content");
//寻找贴子层post-contentfloor
var postContentfloors = evrParentNode.getElementsByClassName("post-contentfloor");
//创建贴子层post-contentfloor
var postContentFloor = document.createElement("div");
//给新创建的div 添上class=post-contentfloor
postContentFloor.classList.add("post-contentfloor");
//给新创建的div 添加HTML内容
postContentFloor.innerHTML = "<div class=\"post-contentfloor-binfo\">\n" +
"<div class=\"post-contentfloor-username\">\n" +
"<span>"+replyThisPostUname+"</span>\n" +
"</div>\n" +
"<div class=\"post-contentfloor-levelnum\">\n" +
"<em></em>\n" +
"</div>\n" +
"</div>\n" +
"<div class=\"post-contentfloor-text\">\n" +
"<span>"+replyThisPostContent+"</span>\n" +
"</div>\n" +
"<div class=\"post-contentfloor-operation\">\n" +
"<ul>\n" +
"<li><button class=\"reply-fr-del\">删除</button></li>\n" +
"<li><button class=\"reply-fr-btn\">回复</button></li>\n" +
"</ul>\n" +
"</div>\n" +
"<div class=\"post-reply-box\">\n" +
"<textarea class=\"post-reply-content\"\n" +
"cols=\"92\" rows=\"10\" placeholder=\"文明社会 理性发贴\"></textarea>\n" +
"<div class=\"post-reply-username\">\n" +
"<ul>\n" +
"<li>\n" +
"<label>username:</label>\n" +
"<input type=\"text\" class=\"post-frreplyusername\" />\n" +
"</li>\n" +
"<li>\n" +
"<button class=\"post-reply-frbutton\">replyEnter</button>\n" +
"</li>\n" +
"</ul>\n" +
"</div>\n" +
"</div>";
//判断是否有贴子层post-contentfloor
if(postContentfloors.length === 0){
//插入新创建的DIV
evrParentNode.insertBefore(postContentFloor,evrParentNode.children[1]);
}else{
//存原有贴子层post-contentfloor
var oldpostContentfloor = postContentfloors[0].outerHTML;
evrParentNode.removeChild(postContentfloors[0]);
//原有贴子层post-contentfloor加入新建的DIV元素中
postContentFloor.innerHTML = oldpostContentfloor + postContentFloor.innerHTML;
evrParentNode.insertBefore(postContentFloor,evrParentNode.children[1]);
}
}
//已有回贴层用户名和内容处理函数 开始
function frpostReplyHandle_FN(e,frpostReplyUname,frpostContent){
var evfrB = e;//当前节点
//获取回贴层父节点post-contentfloor
var frpostContent_FR = targetParent_FN(evfrB,"post-contentfloor");
//获取子节点post-contentfloor
var frpostContentFloors = frpostContent_FR.getElementsByClassName("post-contentfloor");
//创建新的DIV元素
var frpostContentFloor_FR = document.createElement("div");
//给新创建的DIV增加样式post-contentfloor
frpostContentFloor_FR.classList.add("post-contentfloor");
//给新创建的DIV添加HTML内容
frpostContentFloor_FR.innerHTML = "<div class=\"post-contentfloor-binfo\">\n" +
"<div class=\"post-contentfloor-username\">\n" +
"<span>"+frpostReplyUname+"</span>\n" +
"</div>\n" +
"<div class=\"post-contentfloor-levelnum\">\n" +
"<em></em>\n" +
"</div>\n" +
"</div>\n" +
"<div class=\"post-contentfloor-text\">\n" +
"<span>"+frpostContent+"</span>\n" +
"</div>\n" +
"<div class=\"post-contentfloor-operation\">\n" +
"<ul>\n" +
"<li><button class=\"reply-fr-del\">删除</button></li>\n" +
"<li><button class=\"reply-fr-btn\">回复</button></li>\n" +
"</ul>\n" +
"</div>\n" +
"<div class=\"post-reply-box\">\n" +
"<textarea class=\"post-reply-content\"\n" +
"cols=\"92\" rows=\"10\" placeholder=\"文明社会 理性发贴\"></textarea>\n" +
"<div class=\"post-reply-username\">\n" +
"<ul>\n" +
"<li>\n" +
"<label>username:</label>\n" +
"<input type=\"text\" class=\"post-frreplyusername\" />\n" +
"</li>\n" +
"<li>\n" +
"<button class=\"post-reply-frbutton\">replyEnter</button>\n" +
"</li>\n" +
"</ul>\n" +
"</div>\n" +
"</div>";
//判断子节点中是否有节点post-contentfloor
if(frpostContentFloors.length == 0){
frpostContent_FR.insertBefore(frpostContentFloor_FR,frpostContent_FR.children[0]);
}else{
//把原有的post-contentfloor层保留
var oldfrpostContent_FR = frpostContent_FR.getElementsByClassName("post-contentfloor")[0].outerHTML;
frpostContent_FR.removeChild(frpostContentFloors[0]);
var oldnewfloor = oldfrpostContent_FR+frpostContentFloor_FR.innerHTML;
frpostContentFloor_FR.innerHTML = oldnewfloor;
frpostContent_FR.insertBefore(frpostContentFloor_FR,frpostContent_FR.children[0]);
}
}
//已有回贴层用户名和内容处理函数 结束
}
</script>
<body class="end">
<!--post-box 贴子主体-->
<div id="post-box">
<div id="slogan"><span>简单仿制网易留言板。</span></div>
<!--post-enter 发贴框 开始-->
<div id="post-enter">
<textarea id="post-enter-content" class="post-enter-content"
cols="96" rows="10" placeholder="文明社会 理性发贴"></textarea>
<div id="post-enter-username">
<ul>
<li>
<label for="post-username">username:</label>
<input type="text" id="post-username" class="post-username" />
</li>
<li>
<button id="post-enter-button">Enter</button>
</li>
</ul>
</div>
</div>
<hr/>
<!--post-enter 发贴框 结束-->
<!--贴子主体 开始-->
<div id="post-content-box"></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例