怎么写留言的js

留言功能的JavaScript实现方法主要包括以下几种：创建HTML表单、使用JavaScript获取用户输入、将数据存储在合适的地方、以及在页面上显示留言。我们将着重讨论如何通过这些步骤来实现一个基本的留言功能。以下是具体的实现步骤：

一、创建HTML表单

首先，我们需要在HTML中创建一个表单，让用户能够输入他们的留言。表单通常包括一个文本输入框和一个提交按钮。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言板</title>
</head>
<body>
    <h1>留言板</h1>
    <form id="messageForm">
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username" required><br><br>
        <label for="message">留言:</label>
        <textarea id="message" name="message" required></textarea><br><br>
        <button type="submit">提交</button>
    </form>
    <div id="messageList">
        <h2>留言列表:</h2>
    </div>
    <script src="app.js"></script>
</body>
</html>

二、使用JavaScript获取用户输入

接下来，我们需要编写JavaScript代码来获取用户输入并处理表单提交事件。

document.getElementById('messageForm').addEventListener('submit', function(event) {
    event.preventDefault();
    const username = document.getElementById('username').value;
    const message = document.getElementById('message').value;
    if (username && message) {
        addMessage(username, message);
        document.getElementById('messageForm').reset();
    } else {
        alert('请填写所有字段');
    }
});

三、将数据存储在合适的地方

为了简化，我们将留言数据存储在浏览器的本地存储中。这种方式适合小规模的应用。大规模应用通常需要将数据存储在服务器端数据库中。

function addMessage(username, message) {
    let messages = JSON.parse(localStorage.getItem('messages')) || [];
    messages.push({ username: username, message: message, timestamp: new Date().toLocaleString() });
    localStorage.setItem('messages', JSON.stringify(messages));
    displayMessages();
}
function displayMessages() {
    const messageList = document.getElementById('messageList');
    messageList.innerHTML = '<h2>留言列表:</h2>';
    const messages = JSON.parse(localStorage.getItem('messages')) || [];
    messages.forEach(msg => {
        const messageElement = document.createElement('div');
        messageElement.innerHTML = `<strong>${msg.username}:</strong> ${msg.message} <em>(${msg.timestamp})</em>`;
        messageList.appendChild(messageElement);
    });
}
// 初始化显示留言
displayMessages();

四、在页面上显示留言

我们已经在上面的代码中实现了留言的显示功能。每次用户提交新留言后，页面上的留言列表将会更新。

function displayMessages() {
    const messageList = document.getElementById('messageList');
    messageList.innerHTML = '<h2>留言列表:</h2>';
    const messages = JSON.parse(localStorage.getItem('messages')) || [];
    messages.forEach(msg => {
        const messageElement = document.createElement('div');
        messageElement.innerHTML = `<strong>${msg.username}:</strong> ${msg.message} <em>(${msg.timestamp})</em>`;
        messageList.appendChild(messageElement);
    });
}
// 初始化显示留言
displayMessages();

五、综合代码

将以上所有代码综合起来，我们就得到了一个完整的留言功能实现。以下是综合后的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言板</title>
</head>
<body>
    <h1>留言板</h1>
    <form id="messageForm">
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username" required><br><br>
        <label for="message">留言:</label>
        <textarea id="message" name="message" required></textarea><br><br>
        <button type="submit">提交</button>
    </form>
    <div id="messageList">
        <h2>留言列表:</h2>
    </div>
    <script>
        document.getElementById('messageForm').addEventListener('submit', function(event) {
            event.preventDefault();
            const username = document.getElementById('username').value;
            const message = document.getElementById('message').value;
            if (username && message) {
                addMessage(username, message);
                document.getElementById('messageForm').reset();
            } else {
                alert('请填写所有字段');
            }
        });
        function addMessage(username, message) {
            let messages = JSON.parse(localStorage.getItem('messages')) || [];
            messages.push({ username: username, message: message, timestamp: new Date().toLocaleString() });
            localStorage.setItem('messages', JSON.stringify(messages));
            displayMessages();
        }
        function displayMessages() {
            const messageList = document.getElementById('messageList');
            messageList.innerHTML = '<h2>留言列表:</h2>';
            const messages = JSON.parse(localStorage.getItem('messages')) || [];
            messages.forEach(msg => {
                const messageElement = document.createElement('div');
                messageElement.innerHTML = `<strong>${msg.username}:</strong> ${msg.message} <em>(${msg.timestamp})</em>`;
                messageList.appendChild(messageElement);
            });
        }
        // 初始化显示留言
        displayMessages();
    </script>
</body>
</html>

在这个例子中，我们实现了一个基本的留言功能，用户可以输入用户名和留言内容，提交后留言将显示在页面上，并保存在浏览器的本地存储中。每次页面加载时，都会从本地存储中读取留言并显示。这种方法简单易行，适用于小型应用。如果您需要更复杂的功能（如用户认证、服务器端存储等），可以考虑使用更高级的技术和框架。