js 實現簡易留言板功能
阿新 • • 發佈：2018-04-27
con wid NPU children 標準 element 出錯 hdel focus
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>無標題文檔</title> <style> li{list-style:none;} li{position:relative;width:500px;} a{position:absolute;right:10px;} </style> <script> var count = 0; window.onload = function(){ var arrInput = document.getElementsByTagName(‘input‘); arrInput[0].focus(); arrInput[1].onclick = createMessageBoard; arrInput[2].onclick = batchDelete; }; function createMessageBoard(){ var arrInput = document.getElementsByTagName(‘input‘); var arrUl = document.getElementsByTagName(‘ul‘); if(arrInput[0].value == ‘‘){ alert(‘沒有內容輸入！‘); return false; } count++; if(arrUl[0].children.length >4){ var oLast = arrUl[0].lastElementChild || arrUl[0].lastChild; arrUl[0].removeChild(oLast); } var liNode = document.createElement(‘li‘); var checkNode = document.createElement(‘input‘); checkNode.type = ‘checkbox‘; checkNode.name = ‘delete‘; checkNode.innerHTML = arrInput[0].value; addElementNode(liNode,checkNode); liNode.appendChild(document.createTextNode(" "+count+"."+" "+arrInput[0].value)); /*添加文字節點*/ var aNode = document.createElement(‘a‘); aNode.href = ‘javascript:;‘; aNode.innerHTML = "刪除"; aNode.onclick = function(){ arrUl[0].removeChild(this.parentNode); } liNode.appendChild(aNode); addElementNode(arrUl[0],liNode); arrInput[0].value = ""; } function addElementNode(obj,element){ if(obj.children[0]){ obj.insertBefore(element,obj.children[0]); /*在IE下如果第二個參數的節點不存在回報錯，而在標準瀏覽器下不會出錯，標準瀏覽器判斷第二個參數不存在，則會自動轉成appendChild添加*/ }else{ obj.appendChild(element); } } function batchDelete(){ var arrUl = document.getElementsByTagName(‘ul‘); var arrDeleteName = document.getElementsByName(‘delete‘); if(!arrDeleteName.length){ alert(‘未選中任何留言！‘); return false; } for(var i=0;i<arrDeleteName.length;i++){ if(arrDeleteName[i].checked){ arrUl[0].removeChild(arrDeleteName[i].parentNode); i--; //這裏註意要減一個 } } } </script> </head> <body> <input type="text"/> <input type="button" value="增加留言"> <input type="button" value="批量刪除"> <ul> </ul> </body> </html>
js 實現簡易留言板功能