一、撰寫評論頁面
<!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 >
<label>發表評論</label>
<textarea id="my_textarea" cols="60" rows="10"></textarea>
<button id="btn">發表</button>
</div>
<ul id="ul">
<li>這是第一條評論<a href="https://www.cnblogs.com/ruigege0000/p/#">洗掉</a></li>
</ul>
</div>
<script type="text/javascript" src="https://www.cnblogs.com/ruigege0000/p/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>
通過撰寫動態頁面來進行，生成評論 
二、原始碼：
D38_1_Review.html 地址: 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歡迎關注微信公眾號：傅里葉變換，個人賬號，僅用于技術交流
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/262867.html
標籤：JavaScript