打造属于你的在线留言板：让互动更有趣！

2023-12-01 00:07:06

使用 JavaScript 构建互动留言板

什么是留言板？

留言板是一个在网站上普遍存在的功能，它允许用户发表评论、分享意见和提供反馈。它是一种促进用户互动和网站参与度的绝佳方式。如果你有兴趣在你的网站中添加一个留言板，那么 JavaScript、CSS 和 HTML 可以帮助你轻松实现。本文将深入探讨创建一个交互式留言板的步骤。

创建留言板的步骤

准备工作：
- 使用文本编辑器（如记事本或 Sublime Text）和代码编辑器（如 Visual Studio Code 或 Atom）。
- 安装 Node.js 和 npm。
创建项目：
- 创建一个新的项目文件夹。
- 在文件夹中创建一个名为 index.html 的文件。

添加 HTML 代码：

在 index.html 文件中添加以下代码：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>留言板</h1>
<form id="form">
<input type="text" id="message" placeholder="输入留言">
<input type="submit" value="提交">
</form>
<div id="messages"></div>
</body>
</html>

添加 CSS 代码：

在 style.css 文件中添加以下代码：

body {
font-family: Arial, sans-serif;
}

h1 {
font-size: 24px;
margin-bottom: 10px;
}

form {
display: flex;
align-items: center;
}

input[type="text"] {
width: 300px;
padding: 5px;
margin-right: 10px;
}

input[type="submit"] {
padding: 5px 10px;
background-color: #008CBA;
color: white;
border: none;
border-radius: 5px;
}

#messages {
margin-top: 20px;
}

.message {
padding: 10px;
margin-bottom: 10px;
background-color: #f2f2f2;
}

.message-text {
font-size: 16px;
}

.message-time {
font-size: 12px;
color: #888;
}

添加 JavaScript 代码：

在 index.html 文件中添加以下代码：

const form = document.getElementById('form');
const messages = document.getElementById('messages');

form.addEventListener('submit', (event) => {
event.preventDefault();

const message = document.getElementById('message').value;

const newMessage = document.createElement('div');
newMessage.classList.add('message');

const messageText = document.createElement('p');
messageText.classList.add('message-text');
messageText.textContent = message;

const messageTime = document.createElement('p');
messageTime.classList.add('message-time');
messageTime.textContent = new Date().toLocaleString();

newMessage.appendChild(messageText);
newMessage.appendChild(messageTime);

messages.appendChild(newMessage);

document.getElementById('message').value = '';
});