JavaScript实现简易留言板成效

发布时间：2022-04-20 09:27:29 所属栏目：语言来源：互联网

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

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

代码如下：

<!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;

</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)

（编辑：云计算网_泰州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

Tomcat下载和安置	装饰器模式装饰设计模
无用单元采集垃圾回收	Java访问对象的属性和