原理：
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>