留言板的回复,详细步骤的讲解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>留言板</title>
</head>
<style>
* {
padding: 0;
margin: 0;
}
body {
width: 100%;
height: 100%;
background: rgb(65, 65, 63);
}
.bacground {
width: 700px;
height: 100%;
background: white;
margin: auto;
margin-top: 20px;
}
.head,
.pop-head {
height: 50px;
font-size: 20px;
text-align: center;
line-height: 50px;
}
.name {
width: 640px;
height: 40px;
font-size: 20px;
margin: 10px 28px;
line-height: 50px;
border-radius: 8px;
border: 2px solid rgb(139, 137, 137);
outline: none;
}
.content,
.pop-reply {
width: 640px;
height: 150px;
font-size: 22px;
margin: 10px 28px;
border: 2px solid rgb(139, 137, 137);
outline: none;
border-radius: 8px;
resize: none;
}
.btn,
.pop-btn {
float: right;
height: 30px;
margin-right: 28px;
border-radius: 6px;
outline: none;
font-size: 20px;
padding: 0 20px;
background: rgb(169, 238, 255);
}
h3 {
font-size: 20px;
color: rgb(102, 102, 102);
background: rgb(205, 221, 248);
margin-top: 50px;
line-height: 50px;
text-indent: 30px;
font-weight: 545;
}
li {
list-style: none;
width: 640px;
font-size: 22px;
margin: 15px 30px;
}
.message-head {
display: flex;
}
.message-head .photo {
width: 70px;
height: 70px;
background: rgb(6, 109, 134);
display: inline-block;
border-radius: 50%;
text-align: center;
line-height: 70px;
overflow: hidden;
}
.message-head .time {
margin-left: 12px;
}
.liuyan,
.reply p {
width: 560px;
/* height: 76px; */
line-height: 50px;
display: block;
background: rgb(205, 221, 248);
font-size: 20px;
margin-left: 80px;
border-radius: 8px;
text-indent: 15px;
}
.delete {
width: 60px;
height: 30px;
display: block;
line-height: 30px;
margin-left: 580px;
/* margin-bottom: 0px; */
border-radius: 6px;
outline: none;
font-size: 15px;
background: rgb(169, 238, 255);
}
.answer {
width: 60px;
height: 30px;
display: block;
line-height: 30px;
margin-top: -29px;
margin-left: 515px;
border-radius: 6px;
outline: none;
font-size: 15px;
background: rgb(169, 238, 255);
}
.popup {
width: 100vw;
height: 100vh;
position: fixed;
background: rgba(0, 0, 0, 0.3);
left: 0;
top: 0;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
display: none;
}
.pop-content {
width: 700px;
background: #fff;
border-radius: 10px;
overflow: hidden;
padding-bottom: 20px;
}
.reply p {
margin-top: 10px;
background: rgba(100, 100, 100, 0.1);
}
</style>
<body>
<div class="bacground">
<div class="head">留言板</div>
<input class="name" type="text" placeholder="请输入您的昵称" />
<textarea class="content" placeholder="请保持言论文明......"></textarea>
<button class="btn">留言</button>
<h3>大家在说</h3>
<ul class="text">
<!-- <li>
<div class="message-head">
<span class="photo">系统</span>
<p class="time">2019-9-27 0:47:38</p>
</div>
<p class="liuyan">测试留言</p>
<div class="reply">
<p>测试回复</p>
</div>
<button class="delete">Delete</button>
<button class="answer">Answer</button>
</li> -->
</ul>
</div>
<div class="popup">
<div class="pop-content">
<div class="pop-head">回复板</div>
<textarea
class="pop-reply"
placeholder="请保持言论文明......"
></textarea>
<button class="pop-btn">回复</button>
</div>
</div>
<script>
var username = document.querySelector(".name");
var message = document.querySelector(".content");
var btn = document.querySelector(".btn");
var oul = document.querySelector(".text");
//下面获取的两个元素是回复留言的弹窗,一个是回复留言的弹窗的大盒子,还有一个是留言内容textarea的获取,这两个元素非常重要
var op = document.querySelector(".popup");
var obt = document.querySelector(".pop-reply");
var reply;
document.onclick = function (e) {
var ev = event || e;
var target = ev.target || ev.srcElement;
//留言功能
if (target.className === "btn") {
var use = username.value;
var news = message.value;
createMsg(use, news);
message.value = "";
}
//删除留言dele这里用到了事件的原理
if (target.className === "delete") {
target.parentNode.remove();
}
//回复留言找位置非常重要,这里需要获取两个元素和一个全局变量
//这里用到了事件属性,用事件的类型来找到对应的事件,回复留言的功能answer
if (target.className === "answer") {
//需要获取op隐藏的元素.然后让它在点击的时候可以显示出来这里考虑样式的好看,弹性布局使用起来
op.style.display = "flex";
reply = target.parentNode.querySelector(".reply");
console.log(reply);
}
//留言的内容回复以后,需要点击留言按钮,让内容可以显示到页面的的留言的版块的下面
//需要找到留言它所放置的位置DOM树的操作
if (target.className === "pop-btn") {
var repMg = obt.value;
createReply(repMg);
obt.value = "";
}
//关闭回复留言板的信息内容
if (target.className === "popup") {
op.style.display = "none";
}
};
function down() {
document.keydown = function () {
return console.log(111);
};
}
//回复留言的功能
function createReply(a) {
if (!a) {
alert("输入内容不能为空");
return;
}
var p = document.createElement("p");
p.innerHTML = a;
reply.appendChild(p);
op.style.display = "none";
}
//创建一个留言板功能的信息,把留言内容赋值到下面需要添加的元素上面去;这块地方需要理解DOM树的增加元素节点的原理,再写结构的时候,先写然后在动态的添加的DOM树里面
function createMsg(use, news) {
if (!use || !news) {
return;
}
//获取要添加的元素
var oli = document.createElement("li");
// 获取到的元素需要添加内容,添加时间的信息需要注意模板字符串的使用不要把符号加上了
oli.innerHTML = `
<div class="message-head">
<span class="photo">${use}</span>
<p class="time">${getTimes(new Date())}</p>
</div>
<p class="liuyan">${news}</p>
<div class="reply">
</div>
<button class="delete">Delete</button>
<button class="answer">Answer</button>
`;
//让每一次回复的信息内容永远在前一个的基础之上
oul.insertBefore(oli, oul.children[0]);
//点击依次留言按钮之后,留言的按钮就不能在点击,只有等到定时器终止时才可以继续点击
startTimer();
}
//创建一个定时器
function startTimer() {
//当点击留言按钮开启的这一刻起,定时器启动,留言按钮将不可以点击
btn.disabled = true;
//设置一个时间的变量;
var count = 10;
//给按钮的输入框的内容赋值;
btn.innerHTML = count + "s后可以留言";
// clearInterval(t)
//定义一个定时器,时间是逐次递减的
t = setInterval(function () {
count--;
btn.innerHTML = count + "s后可以留言";
//到达一个时间的限制的范围内,定时器终止工作
if (count < 0) {
clearInterval(t);
//这个时候留言的按钮可以点击
btn.disabled = false;
btn.innerHTML = "留言";
}
}, 200);
}
//创建一个获取时间的的函数
function getTimes(time) {
var date = new Date();
var y = date.getFullYear();
var mon = date.getMonth() + 1;
mon = mon < 10 ? "0" + mon : mon;
var d = date.getDate();
d = d < 9 ? "0" + d : d;
var h = date.getHours();
h = h < 9 ? "0" + h : h;
var m = date.getMinutes();
m = m < 9 ? "0" + m : m;
var s = date.getSeconds();
s = s < 9 ? "0" + s : s;
return y + "-" + mon + "-" + d + " " + h + ":" + m + ":" + s;
}
</script>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通