JS实现简单留言板

Posted

tags:

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

  通过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="统计" onclick="totalMessage()"/>
  </body>

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

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

js实现动态添加删除（留言板）

纯生JS：留言板实现

XSS基础学习

Spring Boot + MyBatis + Thymeleaf实现简单留言板应用

Spring Boot + MyBatis + Thymeleaf实现简单留言板应用

html 基于vue.js的简单留言板