利用jQuery设计和实现一个简单的留言板网页

本文链接：https://blog.csdn.net/2301_76675652/article/details/137971036

在现代网络时代，留言板是一个常见且有用的功能，它允许网站访问者在页面上留下自己的评论和反馈。在本篇博客中，我们将介绍如何设计和实现一个基本的留言板网页，让用户能够轻松地发表留言并查看其他用户的留言。

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>