一、編寫評論頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>D38_1_Review</title>
<style>
*{
margin:0;
padding:0;
list-style:none;
}
#box{
width:800px;
border:1px solid #ccc;
margin:100px auto;
padding:20px;
}
#my_textarea{
width:80%;
height:120px;
}
.box-top {
margin-bottom:20px;
}
#ul li{
border-bottom:1px dashed #ccc;
color:red;
line-height:44px;
}
#ul li a{
float:right;
}
</style>
</head>
<body>
<div id="box">
<div class="box-top">
<label>發表評論</label>
<textarea id="my_textarea" cols="60" rows="10"></textarea>
<button id="btn">發表</button>
</div>
<ul id="ul">
<li>這是第一條評論<a href="#">刪除</a></li>
</ul>
</div>
<script type="text/javascript" src="jquery-3.5.1.js">
window.addEventListener('load',function(ev){
// $符號就是監聽某一個label
$('btn').addEventListener('click',function (ev1) {
// 獲取輸入框的內容
var content = $("my_textarea").value; // 取到它的值
console.log(content);
if(content.length == 0) {
alert("請輸入評論的內容"); // 直接拋出的函數
return;
}
// 創建li標籤
var li = document.createElement("li"); // 創建一個li標籤
li.innerHTML = content + '<a href="javascript:;">刪除</a>'; // li標籤的內容 .innerHTML
$('ul').insertBefore(li,$('ul').children[0]) // 先拿到ul標籤，然後把li這個變量插入到ul中第一個li的前面
// 清除輸入框中的內容
my_textare.value = '';
// 刪除評論
var as = ul.getElementsByTagName('a');
console.log(as);
for(var i=0;i<as.length;i++) {
var a = as[i];
a.addEventListener("click",function (ev2) {
this.parentNode.remove(); // 這個標籤就被刪除了
});
}
});
// 監聽按鈕的點擊
function $(id) {
return typeof id=='string' ?document.getElementById(id):null;
}
});
</script>
</body>
</html>
- 通過編寫動態頁面來進行，生成評論
![38.1]()
二、源碼：
- 地址:
https://github.com/ruigege66/JavaScript/blob/master/D38_1_Review.html - 博客園：
https://www.cnblogs.com/ruigege0000/ - CSDN：
https://blog.csdn.net/weixin_44630050?t=1 - 歡迎關注微信公衆號：傅里葉變換，個人賬號，僅用於技術交流
![911]()
