一、编写评论页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>D38_1_Review</title>
<style>
*{
margin:0;
padding:0;
list-style:none;
}
#box{
800px;
border:1px solid #ccc;
margin:100px auto;
padding:20px;
}
#my_textarea{
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>
- 通过编写动态页面来进行，生成评论
二、源码：
- 地址:
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 - 欢迎关注微信公众号：傅里叶变换，个人账号，仅用于技术交流
