javascript實現簡單留言板案例

Posted on by

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

效果展示

空評論時：

新的評論會把舊評論抵下去：

刪除時：

代碼解釋

這裡就是當按鈕點擊事件觸發時，獲取文本域裡面的內容，觸發函數，先進行判斷，判斷文本域的值是否為空，如果是，那麼彈出警示框，並且不將文本的內容顯示在下面。

如果文本框有內容，那麼，創建一個元素li，用li來接收’.然後將li裡面的文本內容設置為文本域的1內容+a標簽（刪除功能）。

然後就是設置新添加的li用於顯示在前面，就是insertbefore。然後就是循環綁定a標簽，實現點哪個a標簽，哪一行就刪除。

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：