javascript實(shí)現(xiàn)簡(jiǎn)單留言板案例
用Javascript實(shí)現(xiàn)留言板案例（附帶刪除留言），供大家參考，具體內(nèi)容如下
正在學(xué)習(xí)大前端中，有代碼和思路不規(guī)范不正確的地方往多多包涵，感謝指教
在一些網(wǎng)站的討論品論區(qū)，我們通常可以看見(jiàn)會(huì)有留言板這個(gè)功能，然后當(dāng)用戶評(píng)論時(shí)，空評(píng)論不能評(píng)論，發(fā)布的評(píng)論將會(huì)最新顯示，把舊的評(píng)論抵下去，然后博主可以對(duì)評(píng)論進(jìn)行刪除
代碼如下：
<!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(’寧沒(méi)有輸入內(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>
效果展示
空評(píng)論時(shí)：
新的評(píng)論會(huì)把舊評(píng)論抵下去：
刪除時(shí)：
代碼解釋
這里就是當(dāng)按鈕點(diǎn)擊事件觸發(fā)時(shí)，獲取文本域里面的內(nèi)容，觸發(fā)函數(shù)，先進(jìn)行判斷，判斷文本域的值是否為空，如果是，那么彈出警示框，并且不將文本的內(nèi)容顯示在下面。
如果文本框有內(nèi)容，那么，創(chuàng)建一個(gè)元素li，用li來(lái)接收’.然后將li里面的文本內(nèi)容設(shè)置為文本域的1內(nèi)容+a標(biāo)簽（刪除功能）。
然后就是設(shè)置新添加的li用于顯示在前面，就是insertbefore。然后就是循環(huán)綁定a標(biāo)簽，實(shí)現(xiàn)點(diǎn)哪個(gè)a標(biāo)簽，哪一行就刪除。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. Gitlab CI-CD自動(dòng)化部署SpringBoot項(xiàng)目的方法步驟2. JS sort方法基于數(shù)組對(duì)象屬性值排序3. ASP中解決“對(duì)象關(guān)閉時(shí),不允許操作。”的詭異問(wèn)題……4. JAVA上加密算法的實(shí)現(xiàn)用例5. Django-migrate報(bào)錯(cuò)問(wèn)題解決方案6. ajax請(qǐng)求添加自定義header參數(shù)代碼7. ASP刪除img標(biāo)簽的style屬性只保留src的正則函數(shù)8. 使用Python和百度語(yǔ)音識(shí)別生成視頻字幕的實(shí)現(xiàn)9. 淺談SpringMVC jsp前臺(tái)獲取參數(shù)的方式 EL表達(dá)式10. 基于javascript處理二進(jìn)制圖片流過(guò)程詳解
網(wǎng)公網(wǎng)安備