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简单留言板效果属于前端实例代码，有关更多实例代码大家可以查看。