码迷,mamicode.com
首页 > 其他好文 > 详细

6.2.13 简易留言板

时间:2018-07-21 20:35:29      阅读:118      评论:0      收藏:0      [点我收藏+]

标签:box   inner   child   element   this   put   get   bsp   var   

<!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 简易留言板

标签:box   inner   child   element   this   put   get   bsp   var   

原文地址:https://www.cnblogs.com/beallaliu/p/9347784.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!