jQuery简易留言板

以下是一个使用jQuery创建简易留言板的示例代码：

HTML 部分：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Simple Guestbook</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="guestbook">
        <h2>Simple Guestbook</h2>
        <form id="messageForm">
            <label for="name">Name:</label>
            <input type="text" id="name" required>
            <label for="message">Message:</label>
            <textarea id="message" required></textarea>
            <button type="submit">Submit</button>
        </form>
        <h3>Messages:</h3>
        <ul id="messages">
            <!-- Messages will be displayed here -->
        </ul>
    </div>
 
    <script src="guestbook.js"></script>
</body>
</html>

JavaScript (jQuery) 部分 (guestbook.js):




$(document).ready(function() {
    // Get messages from localStorage if available
    var messages = localStorage.getItem('messages') ? JSON.parse(localStorage.getItem('messages')) : [];
 
    // Display messages
    messages.forEach(function(message) {
        $('#messages').append('<li><strong>' + message.name + '</strong>: ' + message.message + '</li>');
    });
 
    // Submit message form
    $('#messageForm').submit(function(e) {
        e.preventDefault();
        var name = $('#name').val();
        var message = $('#message').val();
 
        // Add message to messages array
        messages.push({ name: name, message: message });
 
        // Clear form and display new message
        $('#name').val('');
        $('#message').val('');
        $('#messages').append('<li><strong>' + name + '</strong>: ' + message + '</li>');
 
        // Store messages in localStorage
        localStorage.setItem('messages', JSON.stringify(messages));
    });
});

这个例子中，留言信息通过localStorage持久化保存，即使刷新页面也不会丢失。简单的表单验证确保了只有填写了必要信息时，用户才能提交留言。留言被添加到页面上的<ul>列表中，并且使用jQuery动态添加，而不是直接在HTML中写死。

jQuery简易留言板

评论已关闭

推荐阅读