javascript额uh实现留言功能

发布时间：2022-01-18 17:08:48 作者：iii
来源：亿速云阅读：164

# JavaScript实现留言功能

## 前言

在Web开发中，留言功能是最基础且常见的交互需求之一。本文将详细介绍如何使用原生JavaScript实现一个完整的留言板功能，包含表单提交、数据存储、列表渲染和简单样式设计。

## 一、HTML结构搭建

首先创建基础的HTML骨架：

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易留言板</title>
    <style>
        /* 基础样式将在后续补充 */
    </style>
</head>
<body>
    <div class="container">
        <h1>留言板</h1>
        
        <!-- 留言表单 -->
        <form id="messageForm">
            <div class="form-group">
                <label for="username">昵称：</label>
                <input type="text" id="username" required>
            </div>
            <div class="form-group">
                <label for="content">留言内容：</label>
                <textarea id="content" rows="4" required></textarea>
            </div>
            <button type="submit">提交留言</button>
        </form>
        
        <!-- 留言列表 -->
        <div id="messageList"></div>
    </div>

    <script src="script.js"></script>
</body>
</html>

二、CSS基础样式

添加基本样式美化界面：

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    font-family: 'Arial', sans-serif;
}

.form-group {
    margin-bottom: 15px;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

input, textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}

.message-item {
    background-color: #f9f9f9;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 4px;
    border-left: 4px solid #4CAF50;
}

.message-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 0.9em;
    color: #666;
}

三、JavaScript核心功能实现

创建script.js文件，实现核心逻辑：

// 初始化留言数据（模拟数据库）
let messages = JSON.parse(localStorage.getItem('messages')) || [];

// DOM元素
const messageForm = document.getElementById('messageForm');
const messageList = document.getElementById('messageList');

// 表单提交事件
messageForm.addEventListener('submit', function(e) {
    e.preventDefault();
    
    // 获取表单数据
    const username = document.getElementById('username').value;
    const content = document.getElementById('content').value;
    
    // 创建新留言对象
    const newMessage = {
        id: Date.now(), // 使用时间戳作为唯一ID
        username: username.trim(),
        content: content.trim(),
        timestamp: new Date().toLocaleString()
    };
    
    // 添加到数组
    messages.unshift(newMessage); // 新留言显示在最前面
    
    // 保存到本地存储
    saveMessages();
    
    // 重新渲染列表
    renderMessages();
    
    // 重置表单
    messageForm.reset();
});

// 保存留言到localStorage
function saveMessages() {
    localStorage.setItem('messages', JSON.stringify(messages));
}

// 渲染留言列表
function renderMessages() {
    if (messages.length === 0) {
        messageList.innerHTML = '<p>暂无留言，快来发表吧~</p>';
        return;
    }
    
    messageList.innerHTML = messages.map(message => `
        <div class="message-item" data-id="${message.id}">
            <div class="message-header">
                <span>${message.username}</span>
                <span>${message.timestamp}</span>
            </div>
            <div class="message-content">${message.content}</div>
            <button class="delete-btn" onclick="deleteMessage(${message.id})">删除</button>
        </div>
    `).join('');
}

// 删除留言
function deleteMessage(id) {
    if (confirm('确定要删除这条留言吗？')) {
        messages = messages.filter(message => message.id !== id);
        saveMessages();
        renderMessages();
    }
}

// 页面加载时渲染留言
document.addEventListener('DOMContentLoaded', renderMessages);

四、功能扩展

1. 添加字数限制

// 在表单提交事件中添加验证
if (content.length > 200) {
    alert('留言内容不能超过200字');
    return;
}

2. 添加敏感词过滤

const bannedWords = ['敏感词1', '敏感词2'];

function hasBannedWords(text) {
    return bannedWords.some(word => text.includes(word));
}

// 在提交时检查
if (hasBannedWords(content)) {
    alert('留言包含不当内容，请修改后重新提交');
    return;
}

3. 添加分页功能

let currentPage = 1;
const messagesPerPage = 5;

function renderMessages() {
    const start = (currentPage - 1) * messagesPerPage;
    const end = start + messagesPerPage;
    const paginatedMessages = messages.slice(start, end);
    
    // ...渲染逻辑...
    
    // 添加分页控件
    addPagination();
}

function addPagination() {
    const totalPages = Math.ceil(messages.length / messagesPerPage);
    if (totalPages <= 1) return;
    
    const pagination = document.createElement('div');
    pagination.className = 'pagination';
    
    for (let i = 1; i <= totalPages; i++) {
        const pageBtn = document.createElement('button');
        pageBtn.textContent = i;
        if (i === currentPage) {
            pageBtn.disabled = true;
        }
        pageBtn.addEventListener('click', () => {
            currentPage = i;
            renderMessages();
        });
        pagination.appendChild(pageBtn);
    }
    
    messageList.appendChild(pagination);
}

五、完整代码与部署

将所有代码整合后，这个留言板功能已经具备： 1. 留言发布 2. 本地存储 3. 留言删除 4. 基础样式 5. 扩展功能

部署时只需将HTML、CSS和JS文件放在同一目录下即可运行。

六、进一步优化方向

后端集成：改用Ajax与真实后端API交互
用户认证：添加登录功能
富文本编辑：集成Markdown或富文本编辑器
图片上传：支持多媒体内容
响应式设计：优化移动端体验

结语

通过这个约150行的完整实现，我们展示了如何使用原生JavaScript构建基础的前端功能。这个示例涵盖了DOM操作、事件处理、本地存储等核心概念，是初学者理解Web开发流程的优秀实践案例。

”`

注意：实际字数可能因格式和显示方式略有差异。如需精确控制字数，可适当增减扩展功能部分的详细说明。