需求：
通过DOM实现评论的效果
布局只能有一个div,其余创建生成
实现发布，删除，最新发布在最前面
HTML及CSS代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background: url(img/二哈睡觉.jpg);
}
*{margin: 0;padding: 0;}
#all{
width: 600px;
height: 800px;
position: relative;
left: 50%;
top: 70px;
margin: 0 0 0 -300px;
border: 5px #ff9d00 solid;
border-radius: 10px;
background: black;
}
.box{
width: 500px;
height: 100px;
/* background: red; */
position: absolute;
top: 10px;
margin:0 0 0 25px;
border: 2px #ff9d00 solid;
border-radius: 10px;
padding: 0 25px;
}
.header{
width: 80px;
height: 80px;
border: 2px #ff9d00 solid;
border-radius: 80px;
margin: 10px 0 ;
float: left;
}
.img1{ width: 78px;
height: 78px;
border: 2px #ff9d00 solid;
border-radius: 80px;
margin: 10px 10px ;
float: left;
}
.name{
font-size: 16px;
color: #ff9d00;
float: left;
font-weight: bolder;
width: 400px;
border-bottom: #ff9d00 dotted 2px;
margin: 5px 0 0 10px;
height: 40px;
line-height: 40px;
}
.txt{
background: transparent;
width: 300px;
height: 30px;
margin: 10px 0 0 10px;
border: 2px #ff9d00 solid;
border-radius: 5px;
padding: 0 20px;
color: #ff9d00;
outline: #ff9d00;
}
.txt1{
width: 380px;
height: 100%;
color: #ff9d00;
font-size: 16px;
font-weight: bolder;
float: left;
line-height: 100px;
}
.btn{
width: 50px;
height: 35px;
margin: 0 0 0 5px;
border-radius: 5px;
background: #ff9d00;
color: black;
font-weight: bolder;
cursor: pointer;
}
.box2{
position: relative;
bottom: -120px;
width: 550px;
height: 666px;
border: 2px #ff9d00 solid;
border-radius: 10px;
margin: 0 0 0 25px;
overflow-y: scroll;
}
.box3{
position: absolute;
top: 0;
width: 100%;
height: auto;
}
.peo{
width: 100%;
height: 100px;
border-bottom: 2px dotted #ff9d00;
}
.shanchu{font-size: larger;color: #ff9d00;cursor: pointer;float: right;margin: 40px 20px 0 0;}
</style>
</head>
<body>
<div id="all"></div>
</body>
</html>
JS代码
<script>
// 获取大盒子
let oAll = document.getElementById("all");
// 创建用户发表框
let oSet = document.createElement("div");
// 给用户发表框添加类名
oSet.className = "box";
// 创建用户头像
let oHeader = document.createElement("img");
oHeader.setAttribute("src","img/扭动.gif");
// 添加类名
oHeader.className = "header"
// 往用户发表框添加用户头像
oSet.appendChild(oHeader);
// 创建用户ID
let oName = document.createElement("p");
oName.innerHTML = "上善若水";
// 添加类名
oName.className = "name"；
// 往用户发表框添加用户ID
oSet.appendChild(oName);
// 创建评论框
let oTxt = document.createElement("input")；
// 添加类名
oTxt.className = "txt";
oTxt.placeholder = "请输入评论";
// 往用户发表框添加评论框
oSet.appendChild(oTxt);
// 创建发送按钮
let oBtn = document.createElement("button");
// 添加类名
oBtn.className = "btn";
oBtn.innerHTML = "发送"
// 往用户发表框添加发送按钮
oSet.appendChild(oBtn);
// 创建评论区
let oPin = document.createElement("div");
// 添加类名
oPin.className= "box2";
// 往大盒子中添加评论区
oAll.appendChild(oPin);
// 创建一个自适应高度的盒子 用来存放发出去的评论
let oPing = document.createElement("div");
oPing.className= "box3";
oPin.appendChild(oPing);
// 给发送按钮添加点击时间
oBtn.onclick = function(){
// 获取btn按钮
let oBbtn = document.getElementsByClassName("btn")[0];
// 获取用户评论框
let oTtxt = document.getElementsByClassName("txt")[0];
// 创建用户评论
let oPeo = document.createElement("div");
// 添加类名
oPeo.className = "peo";
// 用innerHTML添加用户评论信息 其中oTtxt.value中的信息为动态获取
oPeo.innerHTML += "<img src='img/扭动.gif' class='img1'><p class='txt1'>"+oTtxt.value+"</p><span class='shanchu'> X </span>"
// 使用if判断来给评论区添加用户评论
if(oPing.children.length<0){
oPing.appendChild(oPeo);
}else{
// 使用iinsertBefore(new,old)----往old之前添加节点
oPing.insertBefore(oPeo,oPing.children[0]);
// 清空评论框
oTtxt.value = "";
}
// 获取删除按钮
let oShan = document.getElementsByClassName("shanchu")[0];
// 给删除按钮添加点击时间 实现删除功能
oShan.onclick = function(){
oPing.removeChild(this.parentNode);
}
}
oAll.appendChild(oSet);
</script>
实现效果
新人学习Web 自己写点小东西发出来分享一下 不是很专业 还望各位大佬能多多指点