JavaScript簡單留言板效果

antzone發表於2017-04-13
JavaScript

本章節分享一段程式碼例項，它模擬實現了簡單的留言板效果。

其實此留言板是否真的適合實際應用並不重要，重要的是可以學習一下簡單的DOM元素操作。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#box {
  width: 500px;
}
.yellow {
  background: yellow;
}
.grey {
  background: #f1f1f1;
}
.show {
  display: block;
}
.hide {
  display: none;
}
i {
  margin-right: 5px;
  font-style: normal;
}
</style>
<script>
window.onload = function() {
  var oParent = document.getElementById('parent');
  var oBox = oParent.children[1];
 
  var oText = oParent.children[2];
  var oBtn = oParent.children[4];
  var oEm = oBox.children[0];
  var n = 0;
 
  oBtn.onclick = function() {
    n++;
    var str = oText.value;
    var oP = document.createElement('p'); //建立P元素
    var oI = document.createElement('i'); //建立i元素
    var oB = document.createElement('b'); //建立b元素
    var oSpan = document.createElement('span'); //建立span元素
    var oA = document.createElement('a'); //建立a元素
    var strong = document.createElement('strong'); //建立strong元素
    var aP = oBox.appendChild(oP); //把建立的p新增到div是box的盒子中
    var aI = oP.appendChild(oI); //把建立的i新增到p標籤中
    var aB = oP.appendChild(oB); //把建立的b新增到p標籤中
    var aSpan = oP.appendChild(oSpan); //把建立的span新增到p標籤中
    var aA = oSpan.appendChild(oA); //把建立的a新增到span標籤中
    var aStr = oSpan.appendChild(strong); //把建立的strong新增到span標籤中
    aP.className = 'grey';
    aI.innerHTML = n;
    aB.innerHTML = str;
    aSpan.className = 'hide';
    aA.innerHTML = '確定刪除';
    aA.href = 'javascript:;';
    aStr.innerHTML = '第' + n + '條';
    aStr.style.color = 'red';
    //滑鼠移入p
    aP.onmouseover = function() {
      aSpan.className = 'show';
    }
    //滑鼠移出p
    aP.onmouseout = function() {
      aSpan.className = 'hide';
    }
    //滑鼠點選a按鈕
    aA.onclick = function() {
      n--;
      var nowP = this.parentNode.parentNode; //當前P元素
      oBox.removeChild(this.parentNode.parentNode);
      for (var i = 1; i <= n; i++) {
        //BOX下的P元素不等於當前的P元素
        if (oBox.children[i] != nowP); {
          oBox.children[i].children[0].innerHTML = i; //重新獲取數字
          oBox.children[i].children[2].children[1].innerHTML = '第' + i + '條';
        }
      }
    }
    oText.value = '';
  }
}
</script>
</head>
<body>
  <div id="parent">
    <h4>留言內容：</h4>
    <div id="box">
      <em>這裡會顯示留言內容……</em>
    </div>
    <textarea id="text"></textarea>
    <br />
    <input id="btn" type="button" value="發表留言" />
  </div>
</body>
</html>

相關文章