手把手教你用JavaScript打造简单留言板：含HTML、CSS完整代码示例

创建一个简单的JavaScript留言板需要HTML来构建用户界面，CSS来美化界面，以及JavaScript来处理用户输入和显示留言。以下是一个简单的示例： 1. HTML (文件名: `index.html`): ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <title>简单留言板</title> </head> <body> <div id="message-board"> <h2>留言板</h2> <ul id="messages"></ul> <form id="message-form"> <input type="text" id="message-input" placeholder="输入留言..."> <button type="submit">发送</button> </form> </div> <script src="script.js"></script> </body> </html> ``` 2. CSS (文件名: `styles.css`): ```css #message-board { width: 300px; padding: 20px; border: 1px solid #ccc; margin: 20px auto; } #message-board ul { list-style: none; padding: 0; } #message-board li { margin-bottom: 10px; } ``` 3. JavaScript (文件名: `script.js`): ```javascript document.getElementById('message-form').addEventListener('submit', function(event) { event.preventDefault(); // 阻止表单的默认提交行为 // 获取用户输入 var messageInput = document.getElementById('message-input'); var message = messageInput.value.trim(); // 检查留言是否为空 if (message) { // 创建一个新的li元素来显示留言 var messageElement = document.createElement('li'); messageElement.textContent = message; // 将新的li元素添加到ul中 var messagesElement = document.getElementById('messages'); messagesElement.appendChild(messageElement); // 清空输入框 messageInput.value = ''; } }); ``` 将上述三个文件保存在同一目录下，并在浏览器中打开`index.html`，您就可以看到一个简单的留言板了。用户可以在输入框中输入留言，然后点击“发送”按钮将留言添加到留言板中。 ######[AI写代码神器 | 583点数解答 | 2024-06-25 15:25:15]

服务商

更多选项

快捷项

自定义