HTML设计一个评论区
时间: 2024-01-15 15:05:28 浏览: 28
好的,我可以给您提供一个简单的 HTML 评论区的代码示例。
```html
<!DOCTYPE html>
<html>
<head>
<title>评论区</title>
<style>
.comment {
margin-bottom: 10px;
padding: 10px;
border: 1px solid #ccc;
}
.comment .name {
font-weight: bold;
margin-right: 10px;
}
.comment .timestamp {
font-size: 12px;
color: #999;
margin-left: 10px;
}
.comment .message {
margin-top: 5px;
font-size: 16px;
}
</style>
</head>
<body>
<h1>评论区</h1>
<form>
<label for="name">姓名:</label>
<input type="text" id="name"><br>
<label for="message">评论:</label>
<textarea id="message"></textarea><br>
<input type="button" id="submit" value="提交">
</form>
<div id="comments"></div>
<script>
var comments = [];
var submitButton = document.getElementById("submit");
var nameInput = document.getElementById("name");
var messageInput = document.getElementById("message");
var commentsDiv = document.getElementById("comments");
submitButton.addEventListener("click", function(){
var name = nameInput.value;
var message = messageInput.value;
var date = new Date();
var timestamp = date.toLocaleString();
var comment = {name: name, message: message, timestamp: timestamp};
comments.push(comment);
displayComments();
nameInput.value = "";
messageInput.value = "";
});
function displayComments() {
commentsDiv.innerHTML = "";
for (var i = 0; i < comments.length; i++) {
var comment = comments[i];
var commentDiv = document.createElement("div");
commentDiv.classList.add("comment");
commentDiv.innerHTML = "<span class='name'>" + comment.name + "</span><span class='timestamp'>" + comment.timestamp + "</span><div class='message'>" + comment.message + "</div>";
commentsDiv.appendChild(commentDiv);
}
}
</script>
</body>
</html>
```
这个评论区使用了原生 JavaScript,可以实现实时显示评论和时间戳功能。用户输入姓名和评论后,点击提交按钮,就会在评论区下方添加一条新的评论记录,包括姓名、评论内容和时间戳。评论记录会保存在一个数组中,每次添加新评论后都会重新显示所有评论。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)