代码很简单，主要是利用createElement、appendChild、removeChild来创建、添加和删除元素。使用textarea标签作为输入框，button提交。表单提交后还得刷新页面，所以就没有使用。刚学习html dom可能有些地方写得很蠢，欢迎批评指正。github地址：https://github.com/llycc/learn-js。以下是代码。
<!DOCTYPE html>
<html>
<head>
<title>Message Board</title>
<style type="text/css">
.container {
width:60%;
margin:0 auto;
padding:0 0 50px 0;
border:1px solid rgba(51,204,255,0.5);
}
.container > div {
margin: 0 auto;
width:90%;
}
.inputMeg > textarea {
width:100%;
height:150px;
resize:none;
}
.inputMeg button {
width:70px;
height:30px;
color:white;
font-size:15px;
background-color:#6acdea;
border:1px solid #72c1d8;
border-radius:7%;
cursor:pointer;
display:block;
}
.showMeg {
padding:10px 0;
border-top:1px solid rgba(51,204,255,1);
}
.showMeg > div {
margin-bottom:10px;
border-bottom:1px solid rgba(51,204,255,0.3);
}
</style>
</head>
<body>
<div class="container">
<div>
<div class="inputMeg">
<p>发表您的留言</p>
<textarea name="message" placeholder="一声留言 十年思念" autofocus></textarea>
<button type="button" id="pubMeg">发表</button>
</div>
<p>留言</p>
<div class="showMeg">
</div>
</div>
</div>
<script type="text/javascript">
var index = 1;
var message = document.getElementsByName("message").item(0);
(function pubMessage(){
var pubMeg = document.getElementById("pubMeg");
var showMeg = document.querySelector(".showMeg");
pubMeg.onclick = function(){
var text = message.value;
//非空检查
if(text.search(/[^\r\n\s]/) === -1){
alert("您还没有填写留言");
return;
}
var megBox = document.createElement("div"),
megHead = document.createElement("span"),
megText = document.createElement("p"),
option = document.createElement("select"),
reply = document.createElement("button"),
replyInput = document.createElement("textarea"),
showReply = document.createElement("div");
//楼层数和日期
var now = new Date();
var time = now.toTimeString().split(" ")[0];
megHead.style.color = "#b0b0b0";
megHead.innerHTML = `#${index++} ${now.getUTCFullYear()}-${now.getMonth() + 1}-${now.getDate()} ${time}`;
megText.innerHTML = text.replace(/\r/ig,"").replace(/\n/ig,"<br/>");
//操作选项
option.innerHTML = "<option value=\"option\">操作</option><option value=\"del\">删除</option>"
option.style.float = "right";
option.onchange = function(){
var selected = this.value;
this.selectedIndex = 0;
if(selected === "del"){
let res = confirm("删除留言后不可恢复，您确定要继续吗？");
if(res){
this.parentNode.parentNode.removeChild(this.parentNode);
}
}else{
}
}
//回复按钮
reply.innerHTML = "回复";
reply.type = "button";
reply.style.cursor = "pointer";
reply.style.marginBottom = "20px";
reply.style.fontSize = "10px";
reply.style.color = "white";
reply.style.backgroundColor = "#6acdea"
reply.style.border = "1px solid #72c1d8";
reply.style.borderRadius="7%";
reply.style.display = "block";
reply.onclick = function (){
let replyMeg = replyInput.value;
if(replyMeg.search(/[^\r\n\s]/) === -1){
alert("请输入回复内容");
return;
}
let div = document.createElement("div");
messageP = document.createElement("p"),
timeSpan = document.createElement("span"),
delSpan = document.createElement("span");
div.style.margin = "10px 0";
messageP.style.margin = "0";
messageP.style.fontSize = "13px";
timeSpan.style.fontSize = "13px";
//删除回复按钮
delSpan.innerHTML = "删除";
delSpan.style.color = "blue";
delSpan.style.fontSize = "13px";
delSpan.style.cursor = "pointer";
delSpan.style.marginLeft = "10px";
delSpan.onclick = function(){
let res = confirm("您确定要删除此条回复吗？");
if(res){
showReply.removeChild(div);
}
}
//回复时间
let now = new Date();
let time = now.toTimeString().split(" ")[0];
timeSpan.style.color = "#b0b0b0";
timeSpan.innerHTML = `${now.getUTCFullYear()}-${now.getMonth() + 1}-${now.getDate()} ${time}`;
messageP.innerHTML = "我:" + replyMeg.replace(/\r/ig,"").replace(/\n/ig,"<br/>");
div.appendChild(messageP);
div.appendChild(timeSpan);
div.appendChild(delSpan);
showReply.appendChild(div);
replyInput.value = null;
}
//回复输入框
replyInput.style.width = "50%";
replyInput.style.height = "20px";
replyInput.placeholder = "我也说一句...";
showReply.style.marginLeft = "20px";
megBox.appendChild(megHead);
megBox.appendChild(option);
megBox.appendChild(megText);
megBox.appendChild(showReply);
megBox.appendChild(replyInput);
megBox.appendChild(reply);
showMeg.insertBefore(megBox,showMeg.firstChild);
message.value = null;
};
})();
</script>
</body>
</html>
网友评论