JavaScript实现简易留言板效果-群英

上一篇：详解JavaScript轮播图实现原理下一篇：vue学习之常用高阶函数及示例详解

我们在一些社区论坛常常会看到留言板，那么留言板功能是如何实现呢？首先我们要了解基本需求，在留言板模块，用户能够发布评论，但是空评论不可发布，而且评论会按照时间排序，最新的评论会将旧的评论抵下去。此外，删除的权限只有博主有，用户不可删除评论。了解完基本需求，接下来介绍一下实现建议留言板效果的具体代码：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 * {
 margin: 0;
 padding: 0;
 }

 body {
 padding: 100px;
 }

 textarea {
 width: 200px;
 height: 100px;
 border: 1px solid pink;
 outline: none;
 resize: none;
 }

 ul {
 margin-top: 50px;
 }

 li {
 list-style: none;
 width: 300px;
 padding: 5px;
 background-color: rgb(245, 209, 243);
 color: red;
 font-size: 14px;
 margin: 15px 0;
 }

 li a {
 float: right;
 text-decoration: none;
 }
 </style>
</head>
<body>
<textarea name="" id=""></textarea>
<button>发布</button>
<ul>

</ul>
<script>
 var btn=document.querySelector('button')
 var textarea=document.querySelector('textarea')
 var ul=document.querySelector('ul')
 btn.onclick=function () {
 if (textarea.value==''){
 alert('宁没有输入内容')
 return false
 }else{
 var li=document.createElement('li')
 li.innerHTML=textarea.value+"<a href='javascript:;'>删除</a>"
 ul.insertBefore(li,ul.children[0])
 var as=document.querySelectorAll('a')
 for (var i=0;i<as.length;i++){
 as[i].onclick=function () {
  ul.removeChild(this.parentNode)
 }
 }
 }
 }
</script>
</body>
</html>

效果展示

空评论时：