留言条.html .js来完成

let data = [{
 ??username: "张桑0",
 ??time: "2017-09-07 12:00:00",
 ??text: "留言文本内容。"
},{
 ??username: "张桑1",
 ??time: "2017-09-08 12:00:00",
 ??text: "留言文本内容。"
},{
 ??username: "张桑2",
 ??time: "2017-09-09 12:00:00",
 ??text: "留言文本内容。"
}];

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;
}

留言条.html .js来完成

原文地址：http://www.cnblogs.com/langwo/p/7498068.html