用html搞一个评论区
时间: 2023-07-20 19:38:56 浏览: 65
好的,我可以为你提供一个简单的 HTML 评论区设计方案。具体步骤如下:
1. 首先,在 HTML 文件中添加以下内容:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>评论区</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>评论区</h1>
<div id="comments">
<!-- 评论区 -->
</div>
<form>
<input type="text" id="name" placeholder="请输入用户名"><br>
<textarea id="content" placeholder="请输入评论"></textarea><br>
<button type="button" onclick="addComment()">提交评论</button>
</form>
</body>
</html>
```
在上面的 HTML 文件中,我们添加了一个标题、一个评论区和一个表单。评论区和表单都是空的,我们需要在 CSS 文件中进行样式设计。
2. 接下来,在 CSS 文件中添加以下内容:
```
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
}
#comments {
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 20px;
height: 200px;
overflow-y: scroll;
}
form {
text-align: center;
}
textarea {
width: 100%;
height: 100px;
resize: none;
}
```
在上面的 CSS 文件中,我们添加了一些基本样式,评论区和表单都有一些样式设计。接下来,我们需要在 JavaScript 文件中编写代码实现评论区的功能。
3. 在 JavaScript 文件中添加以下代码:
```
// 添加评论
function addComment() {
var name = document.getElementById("name").value;
var content = document.getElementById("content").value;
if (name && content) {
var date = new Date();
var timestamp = date.toLocaleString();
var comment = "<p><strong>" + name + "</strong>(" + timestamp + "):<br>" + content + "</p>";
document.getElementById("comments").insertAdjacentHTML("beforeend", comment);
document.getElementById("name").value = "";
document.getElementById("content").value = "";
}
}
```
在上面的 JavaScript 文件中,我们添加了一个函数 `addComment()`,实现了评论区的功能。每次用户提交评论时,会获取用户输入的用户名和评论内容,然后使用 `insertAdjacentHTML()` 函数将评论添加到评论区中。
4. 最后,在 HTML 文件中添加以下 JavaScript 代码:
```
<script>
setInterval(function() {
// 在这里添加评论区实时更新的代码
}, 1000);
</script>
```
在上面的 JavaScript 代码中,我们使用 `setInterval()` 函数实现了评论区的实时更新。你需要在函数中添加你自己的代码,使评论区能够实现实时更新。
好了,以上就是一个简单的 HTML 评论区设计方案。希望对你有帮助!