javascript實現簡單留言板案例
阿新 • • 發佈：2021-02-18
用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標籤，哪一行就刪除。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。