<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>message board</title>
<link rel="stylesheet" href="work2.css">
<style type="text/css">
*{
margin:0px;
padding:0px;
}
.container{
border-radius:5%;
border:1px solid black;
min-height:600px;
width:400px;
margin:0 auto;
background:lightgreen;
color:white;
position:relative;
}
.container p,input,textarea,h4,button{
position:relative;
left:20px;
margin:5px 0px;
}
.container #submit,#reset{
border-radius:5%;
width:80px;
height:30px;
background-color:lightsalmon;
border:none;
margin:10px;
}
</style>
</head>
<body>
<div class="container">
<p>please input your name:</p>
<input type="text" id="username" placeholder="example:xxx">
<p>please input your message:</p>
<textarea id="comment" cols="30" rows="10" placeholder="example:hello world"></textarea>
<br>
<button id="submit">SUBMIT</button>
<input type="reset" value="RESET" id="reset">
<hr>
<h4>聊天信息</h4>
<ul id="list">
</ul>
<script>
var submit=document.getElementById("submit");
var username=document.getElementById("username");
var comment=document.getElementById("comment");
var list=document.getElementById("list");
//添加
submit.addEventListener('click',addComment,false);
function addComment(event){
var item=document.createElement("li");
item.innerHTML="name: "+username.value+"-----"+"message: "+comment.value+" <button style='border:none;background-color:black;color:white;width:60px;height:25px;'>删除</button>"+"<hr>";
if(list.childElementCount===0){
list.appendChild(item);
}else{
list.insertBefore(item,list.firstElementChild);
}
comment.value=null;
username.value=null;
}
list.addEventListener('click',del,false);
//删除 事件代理
function del(event){
if(confirm("确定删除此条记录,删除操作无法恢复!")){
var ul=event.currentTarget;
var btn=event.target;
var li=btn.parentElement;
ul.removeChild(li);
}
return false;
}
//reset事件
var reset=document.getElementById("reset");
reset.addEventListener('click',rst,false);
function rst(event){
comment.value=null;
username.value=null;
}
</script>
</div>
</body>
</html>
