当前位置：首页 > 行业动态 > 正文

html网站留言板实例

通过HTML构建表单（含文本域+提交按钮），JavaScript监听提交事件获取输入值，动态创建留言元素插入评论区，配合CSS实现基础样式，可扩展为AJAX提交至服务器或使用localStorage

HTML网站留言板实例

页面结构设计

基本布局

使用HTML创建基础结构,包含留言显示区域和留言输入表单。

<div class="container">
  <div class="message-list">
    <ul id="messages"></ul>
  </div>
  <div class="message-form">
    <form id="messageForm">
      <input type="text" id="messageInput" placeholder="请输入留言">
      <button type="submit">提交</button>
    </form>
  </div>
</div>

样式设计

使用CSS进行基础样式设置：

.container {
  display: flex;
  flex-direction: column;
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}
.message-list {
  border: 1px solid #ccc;
  padding: 10px;
  height: 300px;
  overflow-y: scroll;
  margin-bottom: 20px;
}
.message-form {
  display: flex;
  gap: 10px;
}
#messageInput {
  flex: 1;
  padding: 8px;
}
button {
  padding: 8px 16px;
}

功能实现

留言数据存储

使用JavaScript数组存储留言数据：

html网站留言板实例 第1张

let messages = [];

显示留言功能

创建函数渲染留言列表：

function renderMessages() {
  const messageList = document.getElementById('messages');
  messageList.innerHTML = '';
  messages.forEach((msg, index) => {
    const li = document.createElement('li');
    li.textContent = msg;
    const deleteBtn = document.createElement('button');
    deleteBtn.textContent = '删除';
    deleteBtn.onclick = () => {
      messages.splice(index, 1);
      renderMessages();
    };
    li.appendChild(deleteBtn);
    messageList.appendChild(li);
  });
}

提交留言功能

添加表单提交事件监听：

document.getElementById('messageForm').addEventListener('submit', function(e) {
  e.preventDefault();
  const input = document.getElementById('messageInput');
  const message = input.value.trim();
  if (message) {
    messages.push(message);
    input.value = '';
    renderMessages();
  }
});

完整代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">简易留言板</title>
  <style>
    .container {
      display: flex;
      flex-direction: column;
      max-width: 600px;
      margin: 0 auto;
      padding: 20px;
    }
    .message-list {
      border: 1px solid #ccc;
      padding: 10px;
      height: 300px;
      overflow-y: scroll;
      margin-bottom: 20px;
    }
    .message-form {
      display: flex;
      gap: 10px;
    }
    #messageInput {
      flex: 1;
      padding: 8px;
    }
    button {
      padding: 8px 16px;
    }
    li {
      margin-bottom: 5px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="message-list">
      <ul id="messages"></ul>
    </div>
    <div class="message-form">
      <form id="messageForm">
        <input type="text" id="messageInput" placeholder="请输入留言">
        <button type="submit">提交</button>
      </form>
    </div>
  </div>
  <script>
    let messages = [];
    function renderMessages() {
      const messageList = document.getElementById('messages');
      messageList.innerHTML = '';
      messages.forEach((msg, index) => {
        const li = document.createElement('li');
        li.textContent = msg;
        const deleteBtn = document.createElement('button');
        deleteBtn.textContent = '删除';
        deleteBtn.onclick = () => {
          messages.splice(index, 1);
          renderMessages();
        };
        li.appendChild(deleteBtn);
        messageList.appendChild(li);
      });
    }
    document.getElementById('messageForm').addEventListener('submit', function(e) {
      e.preventDefault();
      const input = document.getElementById('messageInput');
      const message = input.value.trim();
      if (message) {
        messages.push(message);
        input.value = '';
        renderMessages();
      }
    });
    // 初始化渲染
    renderMessages();
  </script>
</body>
</html>

相关问题与解答

问题1：如何实现留言内容的编辑功能？

解答：
要实现留言编辑功能，可以在每条留言旁添加”编辑”按钮，点击编辑按钮时，将当前留言内容替换为输入框，保存按钮替换删除按钮，具体步骤：

  1. 修改留言生成逻辑,添加编辑按钮
  2. 点击编辑时,将文本转换为输入框并保存修改
  3. 更新数据数组和重新渲染列表
// 修改留言生成逻辑
const editBtn = document.createElement('button');
editBtn.textContent = '编辑';
editBtn.onclick = () => {
  const newInput = document.createElement('input');
  newInput.type = 'text';
  newInput.value = msg;
  li.textContent = '';
  li.appendChild(newInput);
  const saveBtn = document.createElement('button');
  saveBtn.textContent = '保存';
  saveBtn.onclick = () => {
    messages[index] = newInput.value;
    renderMessages();
  };
  li.appendChild(saveBtn);
};
li.appendChild(editBtn);

问题2：如何限制留言长度不超过50个字符？

解答：
可以通过两种方法实现：

  1. 前端验证：在提交表单时检查输入长度
  2. 后端验证：在服务器端处理数据时进行检查（本例为纯前端实现）

前端实现方法：

document.getElementById('messageForm').addEventListener('submit', function(e) {
  e.preventDefault();
  const input = document.getElementById('messageInput');
  const message = input.value.trim();
  if (message && message.length <= 50) { // 添加长度验证
    messages.push(message);
    input.value = '';
    renderMessages();
  } else {
    alert('留言内容不能超过50个字符');
网站留言板
0

相关文章