留言板功能，会运用到基本的增删改的功能，增加时，不会出现空格，enter等生成的空值，点击留言时，可以将输入框中的值写入到留言框中，而且点击留言框中的删除按钮时，可以将留言框中的信息删除，
下面为完成时的一些思路，
因为会多次涉及到传值，所以首先封装一个函数，
图片.png
留言，首先要想到的当然是对文本的净化，避免垃圾信息，水贴等大量灌水，对观看和浏览造成不好的体验，应该：
图片.png
每次对输入的文本进行去掉前后空格的trim(）方法，
并且如果是由space，enter等组成的空白字符，或长度为0时，输入直接返回。
图片.png
判断完之后，符合条件的便可直接写入，写入值并且添加一个button删除按钮，为之后的删除管理提供点击事件，每次传完值之后，将文本中的值清空
图片.png
点击button按钮留言时，
调用写入的函数。
图片.png
获取键盘事件，当点击键盘的keycode码为13，即enter时，调用函数。
图片.png
div中点击事件，获取对象目标的类名为button的值，点击删除时，添加active(display：none)，删除该留言。
这就是一个简单的留言板的思路了
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
div {
width: 600px;
height: 500px;
border: solid 2px #c23;
margin-left: 45px;
}
div .active {
display: none;
}
div p {
font-size: 20px;
height: 50px;
line-height: 35px;
border-bottom: dashed 1px #c23;
}
div p span {
margin-left: 20px;
color: orange;
font-size: 14px;
}
div p button {
float: right;
margin-right: 10px;
}
textarea {
width: 700px;
height: 200px;
margin-left: 45px;
margin-top: 20px;
font-size: 25px;
}
button {
width: 120px;
height: 50px;
}
</style>
</head>
<body>
<div></div>
<textarea name="" id="" cols="30" rows="10"></textarea>
<button>留言</button>
</body>
<script>
var div = document.querySelector('div')
var text = document.querySelector('textarea');
var button = document.querySelector('button');
//获取
function getHtml() {
//封装一个加了限制条件的函数
var text_value = text.value.trim();
//当text_value有前后空格时，使用trim()方法去掉
if (text_value == '' && text_value.length == 0) {
return
//当字符内容为空或字符长度为0时，返回不执行
}
//执行时，将内容添加至留言框中
div.innerHTML += `<p>${text_value}<button>删除</button></p>`
p=document.querySelector('p')
//每次添加完后，将输入框中的信息清除
text_value = ''
}
button.onclick = function () {
getHtml();
//点击button按钮时,调用getHtml()函数，将编辑好的传入留言框中
}
window.onkeydown = function (e) {
//键盘事件，当点击键盘事件触发的键的代号为13，即enter键时，调用getHtml()函数
var e = window.event || e.event
if (e.keyCode == 13) {
getHtml()
}
}
div.onclick=function (e){
//获取div中的类名button
if(e.target.nodeName=='BUTTON'){
//点击到button时，执行active，即display:none进行删除
e.target.parentNode.classList.add('active')
}
}
</script>
</html>
网友评论