現在很多類似以微博發佈動態的效果，下麵為一個用 JavaScript寫的小小的類似微博發佈信息的案例 佈局出來的樣式，點擊藍色的刪除鏈接，會刪除對應的那一行內容 陌陌說：重要知識點：獲取輸入框的數值，創建子節點和給子節點添加內容，刪除對應的節點 ...
現在很多類似以微博發佈動態的效果，下麵為一個用 JavaScript寫的小小的類似微博發佈信息的案例
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>微博發佈</title> 6 <style type="text/css"> 7 8 *{ 9 padding: 0; 10 margin: 0; 11 } 12 ul { 13 14 list-style: none; 15 } 16 17 .box { 18 width: 600px; 19 height: auto; 20 border: 1px solid #ccc; 21 margin: 100px auto; 22 text-align: center; 23 padding: 30px 0; 24 background-color: rosybrown; 25 } 26 27 .box textarea { 28 width: 450px; 29 resize: none; /*設置文本不能過拖動*/ 30 } 31 .box li { 32 33 width: 450px; 34 line-height: 30px; 35 border-bottom: 1px dashed #ccc; 36 margin-left: 80px; 37 text-align: left; 38 } 39 40 .box li a { 41 42 float: right; 43 } 44 </style> 45 46 <script type="text/javascript"> 47 48 window.onload = function (){ 49 //獲取數組的第一個 50 var btn = document.getElementsByTagName("button")[0]; 51 var txt = document.getElementsByTagName("textarea")[0]; 52 var ul = document.createElement("ul"); 53 btn.parentNode.appendChild(ul); //添加子節點 54 btn.onclick = function (){ 55 56 //1.需要判斷文本中是否有內容 57 if(txt.value == ""){ 58 59 alert("親!內容不能為空哦!!"); 60 61 return false; //讓操作就在這個地方終止 62 } 63 64 var newli = document.createElement("li"); //創建一個新的li標簽 65 newli.innerHTML = txt.value +"<a href='javascript:;'>刪除</a>"; //給新的標簽添加內容，並拼接刪除已連接 66 ul.appendChild(newli); 67 68 //清空輸入框 69 txt.value = ""; 70 71 var aa = document.getElementsByTagName("a");//獲取所有的a標簽 72 73 for(var i = 0;i<aa.length;i++){ // 遍歷點擊刪除 74 75 aa[i].onclick = function () { 76 77 this.parentNode.remove(); 78 } 79 } 80 81 82 } 83 84 } 85 86 </script> 87 </head> 88 <body> 89 <div class="box"> 90 91 微博發佈:<textarea name="" id="" cols="30" rows="10"></textarea> 92 <button>發佈</button> 93 94 </div> 95 </body> 96 </html>
佈局出來的樣式，點擊藍色的刪除鏈接，會刪除對應的那一行內容
陌陌說：重要知識點：獲取輸入框的數值，創建子節點和給子節點添加內容，刪除對應的節點
