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>

效果展示

空評論時:

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

刪除時:

代碼解釋

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

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

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

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