Skip to content
GitLab
Commit a0ca0d92 authored by Zhu yizheng's avatar Zhu yizheng
Browse files

前端框架完成

parents
Show whitespace changes
Inline Side-by-side
comment.js 0 → 100644
View file @ a0ca0d92
// 获取 DOM 元素
const usernameInput = document.getElementById('username');
const commentInput = document.getElementById('comment');
const submitButton = document.getElementById('submit');
const commentsList = document.getElementById('commentsList');
const paginationContainer = document.getElementById('pagination'); // 翻页容器
// 计数器
let count = 0;
let currentPage = 1; // 当前页码
const commentsPerPage = 2; // 每页显示的评论数
// 存储评论数据
let comments = [];
// 监听提交按钮点击事件
submitButton.addEventListener('click', function () {
usernameInput.value = usernameInput.value.trim();
commentInput.value = commentInput.value.trim();
// 验证输入是否为空
if (usernameInput.value === '' || commentInput.value === '') {
alert('请填写用户名和评论内容！');
return;
}
console.log('提交评论:', usernameInput.value, commentInput.value);
count++; // 增加计数器
console.log('当前评论数量:', count);
// 将评论添加到评论数组中
const newComment = {
username: usernameInput.value,
content: commentInput.value
};
comments.push(newComment);
// 清空输入框
usernameInput.value = '';
commentInput.value = '';
// 更新评论显示
displayComments();
updatePagination();
});
// 显示评论
function displayComments() {
// 清空评论列表
commentsList.innerHTML = '';
// 计算当前页显示的评论范围
const startIndex = (currentPage - 1) * commentsPerPage;
const endIndex = Math.min(startIndex + commentsPerPage, comments.length);
// 根据当前页显示评论
for (let i = startIndex; i < endIndex; i++) {
const comment = comments[i];
const li = document.createElement('li');
li.className = 'comment-item'; // 给评论项添加类名（可选，方便整体样式）
// 创建用户名元素（span）
const usernameSpan = document.createElement('span');
usernameSpan.className = 'comment__username'; // 用户名类名（用于CSS）
usernameSpan.textContent = comment.username;
// 创建评论内容元素（span）
const contentSpan = document.createElement('span');
contentSpan.className = 'comment__content'; // 评论内容类名（用于CSS）
contentSpan.textContent = comment.content;
// 创建删除按钮
const deleteButton = document.createElement('button');
deleteButton.className = 'commonButton'; // 删除按钮类名（用于CSS）
// 添加删除按钮的点击事件
deleteButton.textContent = '删除'; // 设置删除按钮文本
deleteButton.addEventListener('click', function () {
// 删除当前评论
comments.splice(i, 1); // 从评论数组中移除该评论
displayComments(); // 重新渲染评论
updatePagination(); // 更新分页
});
// 将元素组装到li中（顺序：用户名 → 分隔符 → 内容）
li.appendChild(usernameSpan);
li.appendChild(document.createElement('br')); // 添加换行符
li.appendChild(contentSpan);
li.appendChild(deleteButton); // 添加删除按钮
commentsList.appendChild(li); // 将li添加到评论列表中
}
}
// 更新分页
function updatePagination() {
// 清空分页容器
paginationContainer.innerHTML = '';
const totalPages = Math.ceil(comments.length / commentsPerPage); // 计算总页数
// 生成翻页按钮
for (let i = 1; i <= totalPages; i++) {
const pageButton = document.createElement('button');
pageButton.className = 'pagination-button'; // 翻页按钮类名（用于CSS）
pageButton.textContent = i;
pageButton.addEventListener('click', function () {
currentPage = i; // 设置当前页码
displayComments(); // 更新评论显示
});
paginationContainer.appendChild(pageButton);
}
}
index.html 0 → 100644
View file @ a0ca0d92
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="comment.js" defer></script>
<title>评论区</title>
</head>
<body>
<div class="inputArea">
<h3 class="formTitle1">user name</h3>
<input type="text" id="username" placeholder="请输入用户名">
<h3 class="formTitle2">comment content</h3>
<input type="text" id="comment" placeholder="请输入评论内容">
<br>
<button id="submit" class="commomButton">提交</button>
</div>
<div class="commentsArea">
<ul id="commentsList"></ul>
</div>
<div id="pagination"></div>
</body>
</html>
\ No newline at end of file
style.css 0 → 100644
View file @ a0ca0d92
/* 整个输入模块区域作为一个卡片框 */
.inputArea {
width: 500px;
margin: 50px auto; /* 上下边距50px，左右自动居中 */
padding: 20px;
background-color: #fefefe;
border: 2px solid #ddd;
border-radius: 10px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
box-sizing: border-box;
}
.commentsArea{
width: 500px;
margin: 50px auto; /* 上下边距50px，左右自动居中 */
}
/* 标题样式 */
.inputArea h3 {
margin: 12px 0 6px 0;
font-size: 16px;
color: #333;
}
/* 输入框样式：相对于 inputArea 宽度设置 */
.inputArea input[type="text"] {
width: 90%;
height: 36px;
padding: 0 10px;
font-size: 15px;
border: 1px solid #ccc;
border-radius: 6px;
box-sizing: border-box;
}
/* 提交按钮样式 */
#submit {
width: 100px;
height: 36px;
border: none;
border-radius: 6px;
background-color: #333;
color: white;
font-size: 16px;
cursor: pointer;
display: block;
margin-top: 15px;
margin-left: 70%;
}
/* 提交按钮样式 */
.commonButton {
width: 100px;
height: 36px;
border: none;
border-radius: 6px;
background-color: #333;
color: white;
font-size: 16px;
cursor: pointer;
display: block;
margin-top: 15px;
margin-left: 70%;
}
#commentsList {
list-style: none;
padding-left: 0;
margin: 0;
}
/* 评论项样式 */
#commentsList {
padding: 0;
margin: 0;
list-style: none;
}
#commentsList li {
width: 100%;
margin: 18px auto 0 auto; /* 上下留白更自然 */
padding: 20px 26px 18px 22px;
background-color: #fafbfc;
box-shadow: 0 4px 16px rgba(60, 60, 60, 0.07);
font-size: 17px;
color: #333;
box-sizing: border-box;
border-bottom: none; /* 取消底部实线 */
position: relative;
transition: box-shadow 0.2s;
border-left:4px solid #333
}
#commentsList li:not(:last-child)::after {
content: "";
display: block;
position: absolute;
left: 24px;
right: 24px;
bottom: -10px;
height: 1px;
background: #eee;
opacity: 0.85;
}
#commentsList li:hover {
background-color: #fafbfc;
box-shadow: 0 0 20px #cbcccd50;
transform: scale(1.01);
border-left: red 5px solid;
}
#commentsList li:active {
background-color: #eff1f3;
transition: all 0.25s;
-webkit-transition: all 0.25s;
box-shadow: none;
transform: scale(0.98);
}
/* 用户名样式 */
.comment__username {
font-weight: 600;
font-size: 19px;
color: black;
letter-spacing: 0.5px;
display: block;
margin-bottom: 8px;
}
/* 评论内容样式 */
.comment__content {
font-size: 17px;
color: #454d5d;
line-height: 1.65;
margin-top: 0;
}
#pagination {
text-align: center;
margin-top: 20px;
}
.pagination-button {
display: inline-block;
padding: 8px 16px;
margin: 4px ;
background-color: #343434;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
text-decoration: none;
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment