<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
padding:0;margin: 0;
}
.wrap{
800px;border: 1px solid black;
padding: 20px;margin: 0 auto;
}
.wrap h3{
margin: 10px 0 20px;
}
.message{
padding: 10px;border: 1px dashed #ccc;
}
.info{
display: flex;justify-content: space-between;
border-bottom: 1px dashed #ccc;
padding-bottom: 10px;
margin-bottom: 10px;
}
.content{
calc(100%-2px);
height: 120px;
border-radius: 5px;border-color: #ccc;
vertical-align: middle;
margin: 10px 0;
}
.btn{
text-align: right;
}
</style>
</head>
<body>
<div class="wrap">
<h3>留言板</h3>
<div class="exhibit" id="exhibit"></div>
<div class="messageText">
<textarea class="content" id="content"></textarea>
<div class="btn">
<input type="button" value="留言" id="addBtn">
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
let data = [{
username:"张三0",
time:"2017-09-07 09:11:00",
text:"留言内容0"},{
username:"张三1",
time:"2017-09-08 09:11:00",
text:"留言内容0"},{
username:"张三2",
time:"2017-09-09 09:11:00",
text:"留言内容0"
}];
render();
addBtn.addEventListener("click",() =>{
addMessage();
})
content.addEventListener("keydown",(e) =>{
if (e.keyCode === 13){
addMessage();
}
},false)
exhibit.addEventListener("click" , (e) =>{
console.log(e)
if (e.target.className === "removeBtn"){
// e.preventDefault();
e.preventDefault();
let i =e.target.getAttribute("_id");
data.splice(i,1);
render();
}
}, false)
function addMessage(){
data.push({
username:`张三${data.length}`,
time:getNowTime(),
text:content.value
});
content.value = "";
render();
}
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 getNowTime(){
let date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
month =judgeTime(month);
let day = date.getDate();
day = judgeTime(day);
let hours = date.getHours();
hours = judgeTime(hours);
let minutes = date.getMinutes();
minutes = judgeTime(minutes);
let seconds = date.getSeconds();
seconds = judgeTime(seconds);
let nowTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
return nowTime;
}
function judgeTime(time){
if(time < 10 && time > 0){
time = "0" + time;
}
return time;
}