let data = [{
username: "張桑0",
time: "2017-09-07 12:00:00",
text: "留言文本內(nèi)容。"
},{
username: "張桑1",
time: "2017-09-08 12:00:00",
text: "留言文本內(nèi)容。"
},{
username: "張桑2",
time: "2017-09-09 12:00:00",
text: "留言文本內(nèi)容。"
}];

render();
addBtn.addEventListener("click", () => {
addMessage();
}, false)

content.addEventListener("keydown", (e) => {
if(e.keyCode === 13){
addMessage();
}
}, false)

exhibit.addEventListener("click", (e) => {
if(e.target.className === "removeBtn"){
e.preventDefault();
let i = e.target.getAttribute("_id");
data.splice(i, 1);
}
render();
}, false)

function render(){
exhibit.innerHTML = data.map((item, index) => {
return `<div class="message">
<div class="info">
<span>${item.username}</span>
<span>${item.time}</span>
</div>
<p>${item.text}</p>
<div class="btn">
<a href="#" class="removeBtn" _id="${index}">刪除</a>
</div>
</div>`
}).join("");
}

function addMessage(){
data.push({
username: `張三${data.length}`,
time: getNowTime(),
text: content.value
});
content.value = "";
render();
}

function getNowTime(){
let date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;

month = judgeTime(month);

let day = date.getDate();
let hours = date.getHours();
let minutes = date.getMinutes();
let seconds = date.getSeconds();

let nowTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
return nowTime;
}

function judgeTime(time){
if(time < 10 && time > 0){
time = "0" + time;
}
return time;
}

轉(zhuǎn)載于:https://www.cnblogs.com/langwo/p/7498068.html

總結(jié)

以上是生活随笔為你收集整理的留言条.html .js来完成的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。