用原生js製作的簡易留言板。 具備以下功能：1、在輸入框輸入文字留言；2、將留言顯示在留言板；3、刪除留言。 html和css代碼： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <style> 6 ...
用原生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>View Code
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 }
