JS实现简单留言板

最新推荐文章于 2021-08-25 18:47:13 发布

allen111333

最新推荐文章于 2021-08-25 18:47:13 发布

阅读量1.2k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/haojiangtao/p/6746146.html

版权

通过js的HTML DOM来实现对html文档的操作。

　　使用方法：Node.appendChild();

　　　　　　　Node.insertBefore();

Node.removeChild();

<script type="text/javascript">
  		var count=0;
  		window.onload = function(){
  			var Msg = document.getElementById("msg");
  			var Btn = document.getElementById("btn");
  			var Msg_c = document.getElementById("msg_c");
  			var Ul = document.createElement("ul"); //定义一个有序的列表
  			Msg_c.appendChild(Ul);				   //向Msg_c中添加UL节点
  			Btn.onclick = function(){              /* 点击留言以后，在Msg_c中添加列表，在列表中添加内容
  													  在每一条留言后面添加一个<span>标签 使用此标签的onclick属性
  													*/	
   				var MsgValue = Msg.value;          
    			var Li = document.createElement("li");
    			Li.innerHTML = MsgValue + " <span>删除</span>";
   				var arrayLi = Ul.getElementsByTagName("li")   //判断是否是第一个留言
    			if(arrayLi.length>0){
      				Ul.insertBefore(Li,arrayLi[0]);
      				count++;
   	    		}else{
     				Ul.appendChild(Li);
     				count++;
    			}
    			Msg.value='';
    			var Span = document.getElementsByTagName("span");
      			for(var i=0; i<Span.length; i++){
       	 			Span[i].onclick = function(){
          			  Ul.removeChild(this.parentNode);
          			  count--;
       	 			}
      			}
      		}
  		}
  		function totalMessage(){       //统计留言的数量
  			alert("一共有"+count+"条留言");
  		}
  	</script>

 <body>
  		<h1>简易留言板</h1>
		<input id="msg" type="text" size="40" value=""> <input id="btn" type="button" value="留言">
		<div id="msg_c"></div>
		<input type="button" value="统计" οnclick="totalMessage()"/>
  </body>

　　ps.主要利用<span>标签的onclick来实现删除。

转载于:https://www.cnblogs.com/haojiangtao/p/6746146.html