js编写代码微博评论留言板
时间: 2023-05-24 14:00:51 浏览: 213
可以通过以下代码实现微博评论留言板:
HTML部分:
```html
<div>
<textarea id="comment" placeholder="请输入评论"></textarea>
<button onclick="addComment()">提交</button>
</div>
<div id="commentList">
</div>
```
JavaScript部分:
```javascript
var comments = []
function addComment() {
var comment = document.getElementById("comment").value
comments.push(comment)
document.getElementById("comment").value = ""
var commentList = document.getElementById("commentList")
var commentItem = document.createElement("div")
commentItem.innerHTML = comment
commentList.appendChild(commentItem)
}
```
这段代码实现了一个简单的评论留言板,用户在输入框输入评论后点击提交按钮即可将评论添加到留言板中。
相关问题
HTML编写代码微博评论留言板
您好,以下是HTML编写代码微博评论留言板的基本结构:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>微博评论留言板</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>微博评论留言板</h1>
</header>
<section>
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" required>
<label for="message">留言:</label>
<textarea id="message" name="message" required></textarea>
<button type="submit">提交留言</button>
</form>
<div id="message-list">
<!-- 这里会动态生成留言列表 -->
</div>
</section>
<footer>
© 2021 微博评论留言板
</footer>
<script src="main.js"></script>
</body>
</html>
```
感谢您的提问!
用js编写一个评论留言板代码
非常感谢您的提问,我可以为您提供以下的 JavaScript 评论留言板代码参考:
HTML 代码:
```html
<div id="comments">
<h2>留言板</h2>
<form id="comment-form">
<input type="text" id="name" placeholder="请输入您的姓名">
<textarea id="message" placeholder="请输入您的留言"></textarea>
<button type="submit">提交留言</button>
</form>
<ul id="comments-list"></ul>
</div>
```
JavaScript 代码:
```javascript
const commentsList = document.getElementById('comments-list');
const commentForm = document.getElementById('comment-form');
commentForm.addEventListener('submit', submitComment);
function submitComment(e) {
e.preventDefault();
const nameInput = document.getElementById('name');
const messageInput = document.getElementById('message');
// 获取输入框的内容
const name = nameInput.value;
const message = messageInput.value;
if (!name || !message) {
alert('请输入姓名和留言内容!');
return;
}
// 创建新的留言对象
const comment = {
name,
message,
timestamp: Date.now(),
};
// 清除输入框的内容
nameInput.value = '';
messageInput.value = '';
// 将新的留言对象添加到留言列表中
addComment(comment);
}
function addComment(comment) {
const commentItem = document.createElement('li');
const commentHTML = `
<div class="comment-header">
<span class="comment-name">${comment.name}</span>
<span class="comment-timestamp">${formatDate(comment.timestamp)}</span>
</div>
<div class="comment-message">${comment.message}</div>
`;
commentItem.innerHTML = commentHTML;
// 将新的留言对象添加到留言列表中
commentsList.appendChild(commentItem);
}
function formatDate(timestamp) {
const date = new Date(timestamp);
const year = date.getFullYear();
const month = padZero(date.getMonth() + 1);
const day = padZero(date.getDate());
const hour = padZero(date.getHours());
const minute = padZero(date.getMinutes());
const second = padZero(date.getSeconds());
return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
}
function padZero(num) {
return num < 10 ? `0${num}` : num;
}
```
使用这段代码,您可以在网页中添加一个留言板,并让用户提交留言。提交的留言将会显示在留言板下方,您可以自定义留言的样式和布局。