首页html写一个页面表白墙可以实时更新

html写一个页面表白墙可以实时更新

时间: 2023-10-04 08:11:32 浏览: 67

要实现一个实时更新的表白墙页面，你可以使用HTML结合JavaScript来完成。以下是一个简单的示例： ```html <!DOCTYPE html> <html> <head> <title>表白墙</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function() { // 监听表白提交按钮的点击事件 $("#submit-btn").click(function() { // 获取输入框中的内容 var content = $("#content").val(); // 判断内容是否为空 if (content.trim() === "") { alert("请输入内容"); return; } // 创建新的表白项 var newItem = $("<li></li>").text(content); // 将新的表白项添加到列表中 $("#message-list").prepend(newItem); // 清空输入框 $("#content").val(""); }); }); </script> <style> #message-list { list-style-type: none; } </style> </head> <body> <h1>表白墙</h1>  <input type="text" id="content" placeholder="请输入你的表白内容"> <button id="submit-btn">提交</button>  <ul id="message-list"></ul> </body> </html> ``` 这个示例使用了jQuery库来简化DOM操作。当用户在输入框中输入内容并点击提交按钮时，会将内容添加为一个新的表白项，并插入到列表的最前面。同时，输入框会被清空，以便用户输入下一个表白内容。你可以将以上代码保存为一个HTML文件，并在浏览器中打开，即可看到表白墙页面。每次提交新的表白内容时，页面都会实时更新。你可以根据需要进行样式和布局的调整。

阅读全文