在现代网络时代，留言板是一个常见且有用的功能，它允许网站访问者在页面上留下自己的评论和反馈。在本篇博客中，我们将介绍如何设计和实现一个基本的留言板网页，让用户能够轻松地发表留言并查看其他用户的留言。
1. HTML 结构
首先，我们需要一个基本的 HTML 结构来构建留言板页面。在我们的示例中，我们使用了以下结构：
- 一个包含留言内容的
div元素 - 一个表单，包含一个文本域和一个提交按钮，用于用户输入和提交留言
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 省略了一些元数据 -->
</head>
<body>
<div class="messageBox">
<!-- 包含留言内容的容器 -->
</div>
<form class="form">
<!-- 用户输入留言的表单 -->
</form>
<!-- 引入 jQuery 库 -->
</body>
</html>2. CSS 样式
为了使页面看起来更加美观和易于使用，我们可以添加一些 CSS 样式。在示例中，我们对留言框和留言内容进行了一些基本样式设计，使其更具可读性和美观性。
<style>
.messageBox {
width: 600px;
margin: 0 auto;
padding: 20px;
font-family: '微软雅黑';
background-color: #f5f5f5;
text-align: center;
}
.messageBox h2 {
border-bottom: 1px solid black;
padding-bottom: 10px;
margin-bottom: 20px;
}
.messageBox .messages {
list-style: none;
padding: 0;
text-align: left;
}
.messageBox .messages li {
margin-bottom: 10px;
padding: 5px 10px;
}
.messageBox textarea {
width: 500px;
height: 100px;
}
.box {
width: 600px;
margin: 0 auto;
padding: 10px 0px;
border: black solid 1px;
}
p {
text-align: left;
}
button {
font-size: 20px;
margin: 10px;
width: 120px;
height: 40px;
background-color: aquamarine;
cursor: pointer;
border-radius: 5px;
border: none;
}
</style>3. JavaScript 功能
最后，我们需要添加一些 JavaScript 代码，以使留言板具有交互功能。在示例中，我们使用了 jQuery 库来简化 DOM 操作，并实现了以下功能：
- 当用户提交留言时，将其添加到留言列表中
- 清空文本框以便用户输入下一条留言
<script>
$(document).ready(function () {
var num = 1;
let $messageBox = $('.messageBox');
let $messages = $messageBox.find('.messages');
let $form = $messageBox.find('.form');
let $textarea = $form.find('.messageInput');
let $submitBtn = $form.find('button[type="submit"]');
// 添加留言
$form.submit(function (event) {
event.preventDefault();
let messageText = $textarea.val().trim();
if (messageText === '') {
return;
}
let $messageLi = $('<li></li>').text("用户" + num + "说: " + messageText);
$messages.append($messageLi);
// 清空文本框
$textarea.val('');
num++;
});
});
</script>总结
通过以上步骤，我们设计和实现了一个简单的留言板网页。用户可以在文本框中输入留言，并通过提交按钮将其发布到页面上。这个示例可以作为学习如何构建更复杂留言板的基础，并可以根据实际需求进行扩展和定制。
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>留言板</title>
<style>
.messageBox {
width: 600px;
margin: 0 auto;
padding: 20px;
font-family: '微软雅黑';
background-color: #f5f5f5;
text-align: center;
}
.messageBox h2 {
border-bottom: 1px solid black;
padding-bottom: 10px;
margin-bottom: 20px;
}
.messageBox .messages {
list-style: none;
padding: 0;
text-align: left;
}
.messageBox .messages li {
margin-bottom: 10px;
padding: 5px 10px;
}
.messageBox textarea {
width: 500px;
height: 100px;
}
.box {
width: 600px;
margin: 0 auto;
padding: 10px 0px;
border: black solid 1px;
}
p {
text-align: left;
}
button {
font-size: 20px;
margin: 10px;
width: 120px;
height: 40px;
background-color: aquamarine;
cursor: pointer;
border-radius: 5px;
border: none;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="messageBox">
<h2>留言内容</h2>
<div class="box">
<ul class="messages"></ul>
</div>
<form class="form">
<p>请输入留言：</p>
<textarea class="messageInput" placeholder="请输入留言"></textarea>
<button type="submit">发表留言</button>
</form>
</div>
<script>
$(document).ready(function () {
var num = 1;
let $messageBox = $('.messageBox');
let $messages = $messageBox.find('.messages');
let $form = $messageBox.find('.form');
let $textarea = $form.find('.messageInput');
let $submitBtn = $form.find('button[type="submit"]');
// 添加留言
$form.submit(function (event) {
event.preventDefault();
let messageText = $textarea.val().trim();
if (messageText === '') {
return;
}
let $messageLi = $('<li></li>').text("用户" + num + "说: " + messageText);
$messages.append($messageLi);
// 清空文本框
$textarea.val('');
num++;
});
});
</script>
</body>
</html>