留言板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>留言板</title>
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 500px;
height: 500px;
background-color: bisque;
border: 2px solid #ccc;
margin: 0 auto;
}
h1{
height: 50px;
font-size: 20px;
text-align: center;
}
.list{
/* height: auto; */
height: 388px;
}
.list li{
list-style: none;
position: relative;
}
.list li i {
text-align: center;
position: absolute;
right: 80px;
top: 0;
font-size: 20px;
cursor: pointer;
}
.operate{
height: 60px;
}
.message{
height: 60px;
width: 80%;
margin-bottom: -24px;
}
.btn{
height: 60px;
width: 18%;
}
</style>
</head>
<body>
<div class="box">
<h1>
嗯哼的留言版:
<span id="num"> 留言条数(0)</span>
</h1>
<ul class="list">
</ul>
<div class="operate">
<textarea class="message"></textarea>
<button id="btn" class="btn">留言</button>
</div>
</div>
<script>
/*
1.利用innerHTML渲染标签以及内容
2.通过value值获取文本域的内容
3.通过appendChild()方法将子元素内容添加到父元素上
4.通过委托事件 给父元素绑定点击事件 通过e.target.tagName判断标签名
5.通过remove()方法移除元素
*/
//获取元素
var btn = document.getElementById("btn");
var message = document.querySelector(".message");
var list = document.querySelector(".list");
var num = document.getElementById("num");
//定义一个计数器
var count = 0;
//给btn绑定点击事件
btn.onclick = function(){
//判断文本域是否有内容 有就创建元素 操作元素
if(message.value === ""){
alert("未填写内容,无法提交留言!请重新的输入!")
}else{
//创建li元素
var li = document.createElement("li");
//添加给li元素
li.innerHTML = "<span>" + message.value + "</span><i>×</i>";
//上树
list.appendChild(li);
//清空文本域的内容
message.value = "";
//计数器+1
count++;
num.innerHTML = "留言条数(" + count + ")";
}
//操作i标签 当点击i标签删除li整条留言
//使用事件委托 给父元素绑定点击事件 通过e.target做判断
//给父元素绑定点击事件
list.onclick = function(e) {
// console.log(e.target.tagName);
//判断触发的精确元素
if(e.target.tagName.toUpperCase() === "I"){
e.target.parentNode.remove();
count--;
num.innerHTML = "留言条数(" + count + ")";
}
}
}
</script>
</body>
</html>