用原生js制作的简易留言板。
具备以下功能：1、在输入框输入文字留言；2、将留言显示在留言板；3、删除留言。
html和css代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <style> 6 *{margin:0; padding:0;} 7 #container{ 8 width:500px; 9 height:500px; 10 11 } 12 #sendMessage{ 13 width:500px; 14 height: 50px; 15 16 line-height:50px; 17 margin-bottom:30px; 18 } 19 #content{ 20 width:500px; 21 height: 400px; 22 border:1px solid #808080; 23 overflow: scroll; 24 } 25 #messColumn{width:300px;} 26 27 </style> 28 </head> 29 <body> 30 <div id="container"> 31 <div id="sendMessage"> 32 <input id="messColumn" type="text"> 33 <input id="btn" type="button" value="留言"> 34 </div> 35 <!--应该在content里面放入一个ul--> 36 <div id="content"></div> 37 </div>
js代码：
一、点击留言按键时，在留言板的div中创建并添加一个div元素，将文本框内容传递给这个元素。
二、在这个div元素中加入“删除”按键，并且给删除增加单击事件。
三、点击删除按键时，用removeChild函数删除
1 var messCol=document.getElementById("messColumn"); 2 var btn=document.getElementById("btn"); 3 var con=document.getElementById("content"); 4 btn.onclick=function(){ 5 if(messCol.value.trim()==""){ 6 alert("输入内容不可为空或者空格"); 7 return; 8 } 9 var messDiv=document.createElement("div"); 10 messDiv.setAttribute("style","width:450px;height:30px;border:2px dotted #808080;margin-bottom:5px;"); 11 { 12 //这个代码块用来存放构建messDiv内容的代码:留言内容和删除键的样式 13 var messCon = document.createElement("div"); 14 messCon.setAttribute("style","float:left;width:350px;height=30px;line-height:30px;overflow:auto;"); 15 var del = document.createElement("a"); 16 del.setAttribute("style","float:left;width:50px;height:30px;line-height:30px;"); 17 del.setAttribute("href","javascript:;"); 18 del.innerHTML = "删除"; 19 messDiv.appendChild(messCon); 20 messDiv.appendChild(del); 21 messCon.innerHTML=messCol.value; 22 del.onclick=function(){ 23 con.removeChild(this.parentNode); //让父元素content删除子元素的messDiv 24 } 25 } 26 con.appendChild(messDiv); 27 messCol.value=""; //清空输入框的字符内容 28 }
