基于原生JavaScript的网站留言插件实现教程，网站留言插件源码怎么用

本文目录导读：

1. 插件功能概述
2. 插件实现步骤

随着互联网的快速发展，网站留言功能已成为各大网站的重要组成部分，留言功能不仅可以增加网站的互动性，还能收集用户反馈，提高用户体验，本文将为大家带来一款基于原生JavaScript的网站留言插件实现教程，让你轻松打造个性化的留言功能。

图片来源于网络，如有侵权联系删除

插件功能概述

1、用户留言：用户可以在留言框中输入留言内容，点击提交按钮后，留言内容将显示在留言列表中。

2、留言列表：展示所有用户留言，包括用户昵称、留言内容和留言时间。

3、分页功能：当留言数量较多时，实现分页展示，方便用户浏览。

4、删除留言：管理员可以对留言进行删除操作，维护留言内容的健康。

插件实现步骤

1、HTML结构

图片来源于网络，如有侵权联系删除

<div id="leave-message">
  <h2>欢迎留言</h2>
  <textarea id="message-content" placeholder="请输入您的留言..."></textarea>
  <button id="submit-btn">提交</button>
  <div id="leave-list"></div>
  <div id="pagination"></div>
</div>

2、CSS样式

#leave-message {
  width: 600px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
#message-content {
  width: 100%;
  height: 100px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  resize: none;
}
#submit-btn {
  width: 100%;
  padding: 10px;
  background-color: #009688;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
#leave-list {
  margin-top: 20px;
}
#leave-list .leave-item {
  border-bottom: 1px solid #ccc;
  padding: 10px;
  margin-top: 10px;
}
#leave-list .leave-item .nickname {
  color: #009688;
  font-weight: bold;
}
#pagination {
  margin-top: 20px;
  text-align: center;
}

3、JavaScript实现

// 获取元素
const leaveMessage = document.getElementById('leave-message');
const messageContent = document.getElementById('message-content');
const submitBtn = document.getElementById('submit-btn');
const leaveList = document.getElementById('leave-list');
const pagination = document.getElementById('pagination');
// 留言数据
let leaveData = [];
// 初始化留言列表
function initLeaveList() {
  leaveList.innerHTML = '';
  leaveData.forEach((item, index) => {
    const leaveItem = document.createElement('div');
    leaveItem.className = 'leave-item';
    leaveItem.innerHTML = `
      <span class="nickname">${item.nickname}</span>: ${item.content} - ${item.time}
    `;
    leaveList.appendChild(leaveItem);
  });
}
// 分页功能
function initPagination(total, pageSize) {
  const totalPage = Math.ceil(total / pageSize);
  pagination.innerHTML = '';
  for (let i = 1; i <= totalPage; i++) {
    const pageItem = document.createElement('span');
    pageItem.className = 'page-item';
    pageItem.textContent = i;
    pageItem.onclick = () => {
      showLeaveList(i, pageSize);
    };
    pagination.appendChild(pageItem);
  }
}
// 显示留言列表
function showLeaveList(page, pageSize) {
  const start = (page - 1) * pageSize;
  const end = start + pageSize;
  leaveList.innerHTML = '';
  for (let i = start; i < end && i < leaveData.length; i++) {
    const item = leaveData[i];
    const leaveItem = document.createElement('div');
    leaveItem.className = 'leave-item';
    leaveItem.innerHTML = `
      <span class="nickname">${item.nickname}</span>: ${item.content} - ${item.time}
    `;
    leaveList.appendChild(leaveItem);
  }
}
// 提交留言
submitBtn.onclick = () => {
  const content = messageContent.value.trim();
  if (content === '') {
    alert('留言内容不能为空！');
    return;
  }
  const now = new Date();
  const time =${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()} ${now.getHours()}:${now.getMinutes()}:${now.getSeconds()};
  leaveData.push({ nickname: '匿名', content, time });
  initLeaveList();
  initPagination(leaveData.length, 5);
  messageContent.value = '';
};
// 初始化
initLeaveList();
initPagination(leaveData.length, 5);

4、调整样式和功能

根据实际需求，你可以对插件进行以下调整：

（1）修改留言列表样式，如字体、颜色等。

图片来源于网络，如有侵权联系删除

（2）添加用户昵称的获取方式，如使用第三方登录接口。

（3）添加留言删除功能，允许管理员删除特定留言。

（4）优化分页功能，如添加“上一页”和“下一页”按钮。

通过以上教程，相信你已经掌握了基于原生JavaScript的网站留言插件实现方法，在实战中，你可以根据需求进行调整和优化，打造出适合自己的留言功能。

标签： #网站留言插件源码