Skip to content
GitLab
Commit 08cdbb17 authored by happystarkitty's avatar happystarkitty
Browse files

update

parent f5aa3009
Expand all Hide whitespace changes
Inline Side-by-side
jquery.js 0 → 100644
View file @ 08cdbb17
This diff is collapsed.
page.html 0 → 100644
View file @ 08cdbb17
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>评论区</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="input_box" id="inputBox">
<h3>user name</h3>
<input type="text" id="userName">
<br>
<h3>comment content</h3>
<input type="text" id="commentContent">
<br>
<br>
<button name="submitButton" id="submitButton" class="submit_button">
提交
</button>
</div>
<br>
<div class="comment_box" id="comment1">
<h3>name</h3>
<div>
<p>第一条评论</p>
<button class="delete_button">
删除
</button>
</div>
</div>
<br>
<div class="comment_box">
<h3>name</h3>
<p>第二条评论</p>
<button class="delete_button">
删除
</button>
</div>
<br>
<div class="comment_box">
<h3>name</h3>
<div>
<p>第三条评论</p>
<button class="delete_button">
删除
</button>
</div>
</div>
<script src="jquery.js"></script>
<script src="script.js"></script>
</body>
</html>
\ No newline at end of file
script.js 0 → 100644
View file @ 08cdbb17
const html = document.querySelector("html");
const submitButton = document.querySelector("#submitButton");
const userNameInput = document.querySelector("#userName");
const commentContentInput = document.querySelector("#commentContent");
const deleteButton = document.querySelectorAll(".deleteButton");
let commentNumber = 0;
function resetInput() {
userNameInput.value = "";
commentContentInput.value = "";
}
function createComment() {
const userName = userNameInput.value;
const commentContent = commentContentInput.value;
commentNumber = commentNumber + 1;
let comment = document.createElement("div");
comment.className = "comment_box";
let commentatorName = document.createElement("h3");
let commentatorNameText = document.createTextNode(userName);
commentatorName.appendChild(commentatorNameText);
let commentatorComment = document.createElement("p");
let commentatorCommentText = document.createTextNode(commentContent);
commentatorComment.appendChild(commentatorCommentText);
let deleteButton = document.createElement("button");
deleteButton.className = "operation_button";
let deleteButtonText = document.createTextNode("删除");
deleteButton.appendChild(deleteButtonText);
deleteButton.addEventListener("click", () => { html.removeChild(comment) });
comment.appendChild(commentatorName);
comment.appendChild(commentatorComment);
comment.appendChild(deleteButton);
html.appendChild(comment);
resetInput();
}
submitButton.addEventListener("click", createComment);
style.css 0 → 100644
View file @ 08cdbb17
.input_box {
border: 0.1em solid;
border-radius: 1em;
padding: 0.5em;
background-color: rgb(245, 241, 237);
/*flex: auto;*/
/*display: flex;*/
}
.comment_box {
border-left: 0.4em solid black;
padding: 1em;
color: black;
}
.submit_button {
border-left: 1em;
color: whitesmoke;
background-color: black;
}
.delete_button {
border-left: 1em;
color: whitesmoke;
background-color: black;
}
@media (hover:hover) {
.comment_box:hover {
border-left: 0.4em solid red;
}
}
\ No newline at end of file
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