原理：
1.用户在留言框输入留言
2.利用textarea的value属性获取到用户输入的留言
3.动态创建一个li
4.将获取的留言打包成html存到li中
5.根据需要添加删除留言、统计留言数量等功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单的留言板</title>
<style type = "text/css">
*{
padding:0;
margin:0;
}
textarea {
width:320px;
height:80px;
background:whitesmoke;
font-size:16px;
}
span:hover {
cursor:pointer;
}
</style>
</head>
<body>
<h1>简单留言板</h1>
<div id = "box">
<!--通过js实现根据用户的输入动态创建一个存放用户留言的li，并且允许用户删除留言-->
</div>
<label>
<textarea id = "msg" rows = "5" cols = "42"></textarea>
</label>
<input type = "button" id = "btn" value = "留言">
<button id = "calc" onclick = calc()>统计</button>
</body>
<script type = "text/javascript">
var box = document.getElementById("box");
var ul = document.createElement("ul");
box.appendChild(ul);
var btn = document.getElementById("btn");
var msg = document.getElementById("msg");
var n = 0;
btn.onclick = function(){
if(msg.value === ""){
alert("请输入内容")
} else{
n++;
var li = document.createElement("li");
li.innerHTML = msg.value + " "+"<span>X</span>";
var lis = document.getElementsByTagName("li");
if(n === 1){
ul.appendChild(li);
// 如果是第一条留言则用appendChild
}else{
ul.insertBefore(li,lis[0]);
// 最新的留言总在第一条显示
}
msg.value = "";
// 重置文本框
var span = document.getElementsByTagName("span");
for(var i = 0;i<span.length;i++){
span[i].onclick = function(){
ul.removeChild(this.parentNode);
n--;
}
}
}
};
function calc(){
alert("一共有"+n+"条留言")
}
</script>
</html>