一、编写评论页面
<!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){
$('btn').addEventListener('click',function (ev1) {
var content = $("my_textarea").value;
console.log(content);
if(content.length == 0) {
alert("请输入评论的内容");
return;
}
var li = document.createElement("li");
li.innerHTML = content + '<a href="javascript:;">删除</a>';
$('ul').insertBefore(li,$('ul').children[0])
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
- 欢迎关注微信公众号:傅里叶变换,个人账号,仅用于技术交流