<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>留言板</title>
</head>
<body>
<h1>简易留言板</h1>
<div id="box">
<!--<ul>
</ul>-->
</div>
<textarea id="msg"></textarea>
<input type="button" id="btn" value="留言"/>
<button onclick="sum()">统计</button>
</body>
<script type="text/javascript">
var ul = document.createElement('ul');
var box = document.getElementById('box');
box.appendChild(ul);
var btn = document.getElementById('btn');
var msg = document.getElementById('msg')
var count = 0;
btn.onclick = function(){
console.log(msg.value);
var li = document.createElement('li');
//设置内容
li.innerHTML = msg.value + "<span> X</span>"
var lis = document.getElementsByTagName('li');
if(lis.length == 0){
ul.appendChild(li);
count++;
}else{
ul.insertBefore(li,lis[0]);
count++;
}
msg.value = '';
var spans = document.getElementsByTagName('span');
for(var i = 0; i< spans.length; i++){
spans[i].onclick = function(){
ul.removeChild(this.parentNode)
count--;
}
}
}
function sum(){
alert('一共发布了'+count+'条留言');
}
</script>
</html>