6.2.13 简易留言板

Posted 2020-12-27 beallaliu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了6.2.13 简易留言板相关的知识，希望对你有一定的参考价值。

<!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>

以上是关于6.2.13 简易留言板的主要内容，如果未能解决你的问题，请参考以下文章

用javascript实现简易留言板

微信小程序实现简易留言板

jsp做的一个简易留言板功能

vue.js介绍，常用指令，事件，以及制作简易留言版

简易留言板