<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简易留言板</title>
<style>
a{
cursor: pointer;
}
a:hover{
color:red;
background-color: orange;
}
</style>
</head>
<body>
<div>
<p>
<h2>简易留言板</h2>
</p>
</div>
<!--留言显示的div-->
<div id="box">
</div>
<!--操作区-->
<div>
<textarea id="msg" style="height: 69px;"></textarea>
<input id="words" type="button" value="留言" />
<input id="count" type="button" value="统计" onclick="counter();" />
</div>
<script>
//取值
var msg = document.getElementById(‘msg‘);
//开始时在显示区创建新的ul
var ul = document.createElement(‘ul‘);
var box = document.getElementById(‘box‘);
box.appendChild(ul);
//点击留言的操作
var words = document.getElementById(‘words‘);
//全局变量count
count = 0;
//点击留言的事件~~~~~~~~~~~~~~~~~~~~~~~
words.onclick = function () {
//找到textarea的值
message = msg.value;
// 新建一个li
var li = document.createElement(‘li‘);
////往li里添加内容——注意这里是innerHTML！！！
li.innerHTML = msg.value + ‘<span> <a>X</a></span>‘;
//判断后加入到ul
var lis = document.getElementsByTagName(‘li‘);
if (lis.length === 0) {
ul.appendChild(li);
count++;
}
else {
ul.insertBefore(li, lis[0]);
count++;
}
//输入完毕后将textarea的值设置成空
msg.value = ‘‘;
//点击X对a标签进行操作~~~注意要写在“留言”的onclick事件里！
var spans = document.getElementsByTagName(‘span‘);
for(var i=0;i<spans.length;i++){
spans[i].onclick = function () {
//this代表spans[i]
ul.removeChild(this.parentNode);
count--;
}
}
};
//计数的函数
function counter() {
alert(‘一共发布了‘+count+‘条留言~‘);
}
</script>
</body>
</html>
DOM之简单留言板