首页 > 代码库 > JS实现简单留言板

JS实现简单留言板

2024-09-16 09:33:10   207人阅读

  通过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 = http://www.mamicode.com/Msg.value;          "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=http://www.mamicode.com/‘‘;"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="http://www.mamicode.com/留言">
		<div id="msg_c"></div>
		<input type="button" value="http://www.mamicode.com/统计" onclick="totalMessage()"/>
  </body>

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

JS实现简单留言板


联系
我们