返回
编程

网页留言板源码：网页留言板源码，从零开始实现一个简单实用的留言板系统

来源：网络   作者：   日期：2025-10-28 04:59:17  

在现代网站中,留言板是一个常见的交互元素，它允许用户向网站所有者或访客发送消息，无论是个人博客、企业官网还是小型社区网站，一个简洁实用的留言板都能有效提升用户体验和互动性，本文将详细介绍如何从零开始实现一个网页留言板系统，包括HTML结构、CSS样式和JavaScript交互逻辑。

实现步骤

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>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>留言板</h1>
        <form id="messageForm">
            <div class="form-group">
                <label for="name">姓名</label>
                <input type="text" id="name" name="name" required>
            </div>
            <div class="form-group">
                <label for="email">邮箱</label>
                <input type="email" id="email" name="email" required>
            </div>
            <div class="form-group">
                <label for="message">留言内容</label>
                <textarea id="message" name="message" rows="5" required></textarea>
            </div>
            <button type="submit">提交留言</button>
        </form>
        <div class="message-list" id="messageList">
            <!-- 留言将在这里显示 -->
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS样式设计

我们为留言板添加一些基本的样式,使其看起来更加美观。

/* style.css */
body {
    font-family: 'Microsoft YaHei', sans-serif;
    background-color: #f5f5f5;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
.container {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 30px;
    width: 90%;
    max-width: 600px;
}
h1 {
    text-align: center;
    color: #333;
}
.form-group {
    margin-bottom: 20px;
}
label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}
input, textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: inherit;
}
button {
    background-color: #5cb85c;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}
button:hover {
    background-color: #4cae4c;
}
.message-list {
    margin-top: 30px;
}
.message {
    background-color: #f9f9f9;
    border-left: 4px solid #5cb85c;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 0 4px 4px 0;
}
.message-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}
.message-name {
    font-weight: bold;
}
.message-time {
    color: #777;
    font-size: 0.9em;
}
.message-content {
    margin-top: 5px;
    color: #333;
}

JavaScript交互逻辑

我们使用JavaScript来处理表单提交和留言显示。

// script.js
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('messageForm');
    const messageList = document.getElementById('messageList');
    // 从localStorage加载留言
    loadMessages();
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        const name = document.getElementById('name').value;
        const email = document.getElementById('email').value;
        const message = document.getElementById('message').value;
        // 创建留言对象
        const newMessage = {
            name: name,
            email: email,
            content: message,
            time: new Date().toLocaleString()
        };
        // 保存留言到localStorage
        saveMessage(newMessage);
        // 显示留言
        displayMessage(newMessage);
        // 清空表单
        form.reset();
    });
    function saveMessage(message) {
        // 从localStorage获取现有留言
        let messages = JSON.parse(localStorage.getItem('messages')) || [];
        // 添加新留言
        messages.push(message);
        // 保存到localStorage
        localStorage.setItem('messages', JSON.stringify(messages));
    }
    function loadMessages() {
        const messages = JSON.parse(localStorage.getItem('messages')) || [];
        messages.forEach(message => {
            displayMessage(message);
        });
    }
    function displayMessage(message) {
        const messageElement = document.createElement('div');
        messageElement.className = 'message';
        const messageHeader = document.createElement('div');
        messageHeader.className = 'message-header';
        const messageName = document.createElement('div');
        messageName.className = 'message-name';
        messageName.textContent = message.name;
        const messageTime = document.createElement('div');
        messageTime.className = 'message-time';
        messageTime.textContent = message.time;
        messageHeader.appendChild(messageName);
        messageHeader.appendChild(messageTime);
        const messageContent = document.createElement('div');
        messageContent.className = 'message-content';
        messageContent.textContent = message.content;
        messageElement.appendChild(messageHeader);
        messageElement.appendChild(messageContent);
        messageList.insertBefore(messageElement, messageList.firstChild);
    }
});

完整代码

以下是完整的HTML、CSS和JavaScript代码，可以直接保存为一个HTML文件并在浏览器中运行：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">留言板</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
        .container {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            padding: 30px;
            width: 90%;
            max-width: 600px;
        }
        h1 {
            text-align: center;
            color: #333;
        }
        .form-group {
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input, textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-family: inherit;
        }
        button {
            background-color: #5cb85c;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        button:hover {
            background-color: #4cae4c;
        }
        .message-list {
            margin-top: 30px;
        }
        .message {
            background-color: #f9f9f9;
            border-left: 4px solid #5cb85c;
            padding: 15px;
            margin-bottom: 15px;
            border-radius: 0 4px 4px 0;
        }
        .message-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
        }
        .message-name {
            font-weight: bold;
        }
        .message-time {
            color: #777;
            font-size: 0.9em;
        }
        .message-content {
            margin-top: 5px;
            color: #333;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>留言板</h1>
        <form id="messageForm">
            <div class="form-group">
                <label for="name">姓名</label>
                <input type="text" id="name" name="name" required>
            </div>
            <div class="form-group">
                <label for="email">邮箱</label>
                <input type="email" id="email" name="email" required>
            </div>
            <div class="form-group">
                <label for="message">留言内容</label>
                <textarea id="message" name="message" rows="5" required></textarea>
            </div>
            <button type="submit">提交留言</button>
        </form>
        <div class="message-list" id="messageList">
            <!-- 留言将在这里显示 -->
        </div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('messageForm');
            const messageList = document.getElementById('messageList');
            // 从localStorage加载留言
            loadMessages();
            form.addEventListener('submit', function(e) {
                e.preventDefault();
                const name = document.getElementById('name').value;
                const email = document.getElementById('email').value;
                const message = document.getElementById('message').value;
                // 创建留言对象
                const newMessage = {
                    name: name,
                    email: email,
                    content: message,
                    time: new Date().toLocaleString()
                };
                // 保存留言到localStorage
                saveMessage(newMessage);
                // 显示留言
                displayMessage(newMessage);
                // 清空表单
                form.reset();
            });
            function saveMessage(message) {
                // 从localStorage获取现有留言
                let messages = JSON.parse(localStorage.getItem('messages')) || [];
                // 添加新留言
                messages.push(message);
                // 保存到localStorage
                localStorage.setItem('messages', JSON.stringify(messages));
            }
            function loadMessages() {
                const messages = JSON.parse(localStorage.getItem('messages')) || [];
                messages.forEach(message => {
                    displayMessage(message);
                });
            }
            function displayMessage(message) {
                const messageElement = document.createElement('div');
                messageElement.className = 'message';
                const messageHeader = document.createElement('div');
                messageHeader.className = 'message-header';
                const messageName = document.createElement('div');
                messageName.className = 'message-name';
                messageName.textContent = message.name;
                const messageTime = document.createElement('div');
                messageTime.className = 'message-time';
                messageTime.textContent = message.time;
                messageHeader.appendChild(messageName);
                messageHeader.appendChild(messageTime);
                const messageContent = document.createElement('div');
                messageContent.className = 'message-content';
                messageContent.textContent = message.content;
                messageElement.appendChild(messageHeader);
                messageElement.appendChild(messageContent);
                messageList.insertBefore(messageElement, messageList.firstChild);
            }
        });
    </script>
</body>
</html>

通过以上步骤,我们成功创建了一个简单但功能完整的网页留言板系统，这个留言板使用浏览器的localStorage来存储留言数据，无需后端支持即可运行，这只是一个基础版本，你可以根据需要添加更多功能，如用户验证、留言编辑和删除、分页显示等。

希望这篇文章能帮助你快速实现一个网页留言板系统！

网页留言板源码：网页留言板源码，从零开始实现一个简单实用的留言板系统

分类：编程
地址：https://www.jinti.net/post/231522.html
标签：留言板网页源码是什么留言板管理系统源码留言板php源码
责任编辑：今题网
版权声明：除非特别标注，否则均为本站原创文章，转载时请以链接形式注明文章出处。

相关文章：

文章已关闭评论！


页面加载时长：0.041 秒 数据库查询：10 次 占用内存：1.47 MB
闽ICP备2023004790号