JavaScript簡易留言板效果

admin發表於2018-12-07
JavaScript

本章節分享一段程式碼例項，它實現了簡單的留言功能。

當然在實際應用中不可能有這麼簡單的留言簿功能，只是介紹一下相關的dom元素操作。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload = function(){
  var oMsg = document.getElementById("msg");
  var oBtn = document.getElementById("btn");
  var oMsg_c = document.getElementById("msg_c");
  var oUl = document.createElement("ul");
  oMsg_c.appendChild(oUl);
  oBtn.onclick = function(){
    var sVal = oMsg.value;
    var oli = document.createElement("li");
    oli.innerHTML = sVal + " <span>刪除</span>";
    var oli1 = oUl.getElementsByTagName("li");
    if(oli1.length>0){
      oUl.insertBefore(oli,oli1[0]);
    }
    else{
      oUl.appendChild(oli);
    }
    oMsg.value='';
    var oSpan = document.getElementsByTagName("span");
    for(var index=0; index<oSpan.length; index++){
      oSpan[index].onclick = function(){
        oUl.removeChild(this.parentNode);
      }
    }
  }
} 
</script>
</head>
<body>
<h1>簡易留言板</h1>
<input id="msg" type="text" size="40" value="">
<input id="btn" type="button" value="留言">
<div id="msg_c"></div>
</body>
</html>

上面的程式碼實現了簡單留言和刪除留言的功能，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.window.onload = function(){}，當文件內容完全載入完畢再去執行函式。

（2）.var oMsg = document.getElementById("msg")，獲取id屬性值為msg的元素物件。

（3）.var oBtn = document.getElementById("btn")，獲取id屬性值為btn的元素物件。

（4）.var oMsg_c = document.getElementById("msg_c")，獲取id屬性值為msg_c的元素物件。

（5）.var oUl = document.createElement("ul")，建立一個ul元素物件。

（6）.oMsg_c.appendChild(oUl)，將ul元素追加到oMsg_c 。

（7）.oBtn.onclick = function(){}，為按鈕註冊click事件處理函式。

（8）.var sVal = oMsg.value，獲取留言內容。

（9）.var oli = document.createElement("li")，建立一個li元素。

（10）.oli.innerHTML = sVal + " <span>刪除</span>"，追加一個span元素。

（11）.var oli1 = oUl.getElementsByTagName("li")，獲取ul元素下當前li元素物件集合。

（12）.if(oli1.length>0){

  oUl.insertBefore(oli,oli1[0]);

}，如果當前ul下存在li元素，那麼就將新的li元素插入到列表開頭。

（13）.else{

  oUl.appendChild(oli);

}，否則的話在ul中追加一個li元素、

（14）.oMsg.value=''，然後清空文字框。

（15）.var oSpan = document.getElementsByTagName("span")，獲取span元素集合。

（16）.for(var index=0; index<oSpan.length; index++){

  oSpan[index].onclick = function(){

    oUl.removeChild(this.parentNode);

  }

}遍歷每一個span元素，併為其註冊click事件處理函式。

點選此按鈕可以刪除span所在的父元素，也就是li元素。

二.相關閱讀:

（1）.document.createElement()參閱document.createElement()一章節。

（2）.appendChild()參閱JavaScript appendChild()一章節。

（3）.getElementsByTagName()參閱document.getElementsByTagName()一章節。

（4）.removeChild()參閱JavaScript removeChild()一章節。

（5）.parentNode參閱JavaScript parentNode一章節。

相關文章