Register
> 博客>

jquery留言板代码

新星源码网 3月 10日 1 0 

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言板</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <style>
        #messageBoard {
            width: 400px;
            margin: 20px;
        }
        #messages {
            list-style: none;
            padding: 0;
        }
        .message {
            margin-bottom: 10px;
            padding: 10px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>

<div id="messageBoard">
    <h2>留言板</h2>
    <ul id="messages"></ul>
    <form id="messageForm">
        <label for="name">姓名:</label>
        <input type="text" id="name" required>
        <br>
        <label for="message">留言:</label>
        <textarea id="message" rows="4" required></textarea>
        <br>
        <button type="submit">提交留言</button>
    </form>
</div>

<script>
    $(document).ready(function() {
        // 提交留言表单
        $("#messageForm").submit(function(event) {
            event.preventDefault();

            // 获取表单数据
            var name = $("#name").val();
            var message = $("#message").val();

            // 创建留言元素
            var messageElement = $("<li class='message'><strong>" + name + ":</strong> " + message + "</li>");

            // 将留言添加到留言板
            $("#messages").append(messageElement);

            // 清空表单
            $("#name").val("");
            $("#message").val("");
        });
    });
</script>

</body>
</html>

这个简单的留言板包含一个表单，用户可以输入姓名和留言，并通过点击提交按钮来添加留言到留言板。使用了jQuery来简化DOM操作。

在实际应用中，你可能希望添加一些额外的功能，例如：

本地存储： 将留言保存在本地存储中，以便用户在页面刷新后仍然能够看到之前的留言。

时间戳： 在留言中添加时间戳，显示每条留言的时间。

删除留言： 添加删除留言的功能。

表单验证： 对用户输入进行验证，确保输入的数据符合预期。

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>留言板</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<style>
#messageBoard {
width: 400px;
margin: 20px;
}
#messages {
list-style: none;
padding: 0;
}
.message {
margin-bottom: 10px;
padding: 10px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="messageBoard">
<h2>留言板</h2>
<ul id="messages"></ul>
<form id="messageForm">
<label for="name">姓名:</label>
<input type="text" id="name" required>
<br>
<label for="message">留言:</label>
<textarea id="message" rows="4" required></textarea>
<br>
<button type="submit">提交留言</button>
</form>
</div>
<script>
$(document).ready(function() {
// 恢复本地存储的留言
var savedMessages = JSON.parse(localStorage.getItem("messages")) || [];
$("#messages").html(savedMessages.join(""));
// 提交留言表单
$("#messageForm").submit(function(event) {
event.preventDefault();
// 获取表单数据
var name = $("#name").val();
var message = $("#message").val();
var timestamp = new Date().toLocaleString();
// 创建留言元素
var messageElement = $("<li class='message'><strong>" + name + ":</strong> " + message + " <span class='timestamp'>" + timestamp + "</span></li>");
// 将留言添加到留言板
$("#messages").append(messageElement);
// 保存留言到本地存储
savedMessages.push(messageElement[0].outerHTML);
localStorage.setItem("messages", JSON.stringify(savedMessages));
// 清空表单
$("#name").val("");
$("#message").val("");
});
});
</script>
</body>
</html>

这个示例中，我们使用了localStorage来存储留言，以便在页面刷新后仍然能够查看。每个留言都包含了一个时间戳。本地存储在同一域名下的不同页面之间共享，但是请谨慎使用，因为它有一些限制和安全性考虑。

Related

热门文章

微海报