JavaScript简单留言板效果

快乐打工仔 分类:实例代码

本章节分享一段代码实例,它模拟实现了简单的留言板效果。

其实此留言板是否真的适合实际应用并不重要,重要的是可以学习一下简单的DOM元素操作。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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>

JavaScript简单留言板效果,这样的场景在实际项目中还是用的比较多的,关于JavaScript简单留言板效果就介绍到这了。

JavaScript简单留言板效果属于前端实例代码,有关更多实例代码大家可以查看

JavaScript简单留言板效果

回复

我来回复
  • 暂无回复内容