码迷,mamicode.com
首页 > Web开发 > 详细

留言条.html .js来完成

时间:2017-09-09 14:32:35      阅读:136      评论:0      收藏:0      [点我收藏+]

标签:username   list   end   minutes   user   innerhtml   return   code   ==   

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来完成

标签:username   list   end   minutes   user   innerhtml   return   code   ==   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!