javascript实现简单留言板案例

这篇文章主要为大家详细介绍了javascript实现简单留言板案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

用Javascript实现留言板案例（附带删除留言），供大家参考，具体内容如下

正在学习大前端中，有代码和思路不规范不正确的地方往多多包涵，感谢指教

在一些网站的讨论品论区，我们通常可以看见会有留言板这个功能，然后当用户评论时，空评论不能评论，发布的评论将会最新显示，把旧的评论抵下去，然后博主可以对评论进行删除

代码如下：

				?

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