dw留言板代码：使用Dreamweaver快速实现留言板功能，简单代码与实现步骤

来源：网络作者：日期：2025-10-17 05:05:45

在Web开发中,留言板是一个常见的互动功能，能够增强用户与网站之间的互动性，本文将通过简单的HTML、CSS和JavaScript代码，结合Dreamweaver的便捷操作，教你如何快速实现一个留言板功能，即使你对编程不太熟悉，只要按照步骤操作，也能轻松完成。

留言板的基本功能需求

一个简单的留言板通常需要以下功能：

用户输入区域：用于输入姓名和留言内容。
提交按钮：用户点击后提交留言。
留言展示区域：展示已提交的留言。
清空留言功能（可选）：管理员或用户可以清空留言。

代码实现

下面是一个完整的留言板代码示例,包含HTML、CSS和JavaScript部分，你可以将以下代码复制到Dreamweaver中，直接保存为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: Arial, sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 20px;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        h1 {
            text-align: center;
            color: #333;
        }
        .input-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
        }
        input, textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
        .message-list {
            margin-top: 20px;
            border-top: 1px solid #ddd;
            padding-top: 20px;
        }
        .message {
            background-color: #f9f9f9;
            padding: 10px;
            border-radius: 4px;
            margin-bottom: 10px;
        }
        .message-header {
            font-weight: bold;
            margin-bottom: 5px;
        }
        .clear-btn {
            background-color: #f44336;
        }
        .clear-btn:hover {
            background-color: #d32f2f;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>留言板</h1>
        <div class="input-group">
            <label for="name">姓名：</label>
            <input type="text" id="name" placeholder="请输入您的姓名">
        </div>
        <div class="input-group">
            <label for="message">留言内容：</label>
            <textarea id="message" rows="4" placeholder="请输入您的留言内容"></textarea>
        </div>
        <button onclick="addMessage()">提交留言</button>
        <button onclick="clearMessages()" class="clear-btn">清空留言</button>
        <div class="message-list" id="messageList">
            <!-- 留言将在这里显示 -->
        </div>
    </div>
    <script>
        // 存储留言的数组
        let messages = [];
        // 添加留言
        function addMessage() {
            const name = document.getElementById('name').value;
            const messageText = document.getElementById('message').value;
            // 检查是否为空
            if (name.trim() === '' || messageText.trim() === '') {
                alert('请填写姓名和留言内容！');
                return;
            }
            // 创建留言对象
            const message = {
                name: name,
                text: messageText,
                time: new Date().toLocaleString()
            };
            // 将留言添加到数组
            messages.push(message);
            // 更新留言列表显示
            displayMessages();
            // 清空输入框
            document.getElementById('name').value = '';
            document.getElementById('message').value = '';
        }
        // 显示留言列表
        function displayMessages() {
            const messageList = document.getElementById('messageList');
            messageList.innerHTML = '';
            // 遍历留言数组，显示每一条留言
            messages.forEach(msg => {
                const messageDiv = document.createElement('div');
                messageDiv.className = 'message';
                const header = document.createElement('div');
                header.className = 'message-header';
                header.textContent = `${msg.name} - ${msg.time}`;
                const content = document.createElement('div');
                content.textContent = msg.text;
                messageDiv.appendChild(header);
                messageDiv.appendChild(content);
                messageList.appendChild(messageDiv);
            });
        }
        // 清空留言
        function clearMessages() {
            if (confirm('确定要清空所有留言吗？')) {
                messages = [];
                displayMessages();
            }
        }
    </script>
</body>
</html>

代码解析

HTML部分：
- 创建了输入姓名和留言内容的表单。
- 添加了提交按钮和清空按钮。
- 使用<div id="messageList">作为留言展示区域。
CSS部分：
- 简单的样式设计,使留言板看起来美观。
- 设置了输入框、按钮和留言列表的样式。
JavaScript部分：
- 使用一个数组messages来存储留言。
- addMessage()函数用于添加新留言，并更新显示。
- displayMessages()函数用于动态显示留言列表。
- clearMessages()函数用于清空留言列表。