代碼很簡(jiǎn)單，主要是利用createElement、appendChild、removeChild來(lái)創(chuàng)建、添加和刪除元素。使用textarea標(biāo)簽作為輸入框，button提交。表單提交后還得刷新頁(yè)面，所以就沒有使用。剛學(xué)習(xí)html dom可能有些地方寫得很蠢，歡迎批評(píng)指正。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>發(fā)表您的留言</p>
<textarea name="message" placeholder="一聲留言 十年思念" autofocus></textarea>
<button type="button" id="pubMeg">發(fā)表</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");
//樓層數(shù)和日期
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/>");
//操作選項(xiàng)
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("刪除留言后不可恢復(fù)，您確定要繼續(xù)嗎？");
if(res){
this.parentNode.parentNode.removeChild(this.parentNode);
}
}else{
}
}
//回復(fù)按鈕
reply.innerHTML = "回復(fù)";
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("請(qǐng)輸入回復(fù)內(nèi)容");
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";
//刪除回復(fù)按鈕
delSpan.innerHTML = "刪除";
delSpan.style.color = "blue";
delSpan.style.fontSize = "13px";
delSpan.style.cursor = "pointer";
delSpan.style.marginLeft = "10px";
delSpan.onclick = function(){
let res = confirm("您確定要?jiǎng)h除此條回復(fù)嗎？");
if(res){
showReply.removeChild(div);
}
}
//回復(fù)時(shí)間
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;
}
//回復(fù)輸入框
replyInput.style.width = "50%";
replyInput.style.height = "20px";
replyInput.placeholder = "我也說(shuō)一句...";
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>
