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標簽，哪一行就刪除。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
1. python利用os模塊編寫文件復制功能——copy()函數用法2. php測試程序運行速度和頁面執行速度的代碼3. php網絡安全中命令執行漏洞的產生及本質探究4. 三個不常見的 HTML5 實用新特性簡介5. 無線標記語言(WML)基礎之WMLScript 基礎第1/2頁6. ajax請求添加自定義header參數代碼7. Python使用jupyter notebook查看ipynb文件過程解析8. 解決Python 進程池Pool中一些坑9. 解決python腳本中error: unrecognized arguments: True錯誤10. IntelliJ IDEA創建普通的Java 項目及創建 Java 文件并運行的教程
網公網安備