Web实现：简单的留言板功能实现简单的留言板功能，只是简单的demo，并不能保存数据，如果刷新页面，数据就会丢失，输入内

实现简单的留言板功能，只是简单的demo，并不能保存数据，如果刷新页面，数据就会丢失，输入内容点击留言按钮，输入的内容即会显示到页面上，同时加上删除按钮，可以删除当前数据。

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div id="content">
		聊天记录<ul id="words"></ul>
	</div>
	<textarea id="msg"></textarea>
	<button id="btn1">留言</button>
	<button id="btn2">统计</button>
</body>
<script type="text/javascript">
	var btn1=document.getElementById("btn1");
	var btn2=document.getElementById("btn2");
	var msg=document.getElementById("msg");
	var ul=document.getElementById("words");
	var liCount=0;
	btn1.onclick=function(){
		if(msg.value){
			var li=document.createElement("li");//添加li标签
			li.innerHTML=msg.value+"&nbsp;&nbsp;&nbsp;&nbsp;<span>X</span>";//在标签中添加内容
			//li添加到ul中有两种情况，有内容或没内容
			if(liCount==0){
				ul.appendChild(li);//追加到后面
				liCount++;
			}else{
				ul.insertBefore(li,ul.childNodes[0]);//最新数据在第一行
				liCount++;
			}
			msg.value="";
			var span=document.getElementsByTagName('span');
			for(var i=0;i<span.length;i++){
				span[i].onclick=function(){
					ul.removeChild(this.parentNode);
					liCount--;
				}
			}
		}else{
			alert("内容不能为空");
		}
	}
	btn2.onclick=function(){

	}
</script>
</html>

效果图： img-blog.csdnimg.cn/383bc191d30…

统计按钮还未实现，有需求可以再根据实际修改。