javascript實現(xiàn)簡單留言板案例

更新時間：2021年02月09日 14:08:04 作者：愛前端的茂茂

這篇文章主要為大家詳細介紹了javascript實現(xiàn)簡單留言板案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

用Javascript實現(xiàn)留言板案例（附帶刪除留言），供大家參考，具體內(nèi)容如下

正在學(xué)習(xí)大前端中，有代碼和思路不規(guī)范不正確的地方往多多包涵，感謝指教

在一些網(wǎng)站的討論品論區(qū)，我們通?？梢钥匆姇辛粞园暹@個功能，然后當(dāng)用戶評論時，空評論不能評論，發(fā)布的評論將會最新顯示，把舊的評論抵下去，然后博主可以對評論進行刪除

代碼如下：

<!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>發(fā)布</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('寧沒有輸入內(nèi)容')
 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>

效果展示

空評論時：