javascript 编写留言板代码
时间: 2024-01-31 12:04:01 浏览: 28
以下是一个简单的留言板的 JavaScript 代码示例:
```javascript
// 定义一个留言板的数组
var messages = [];
// 获取页面元素
var messageInput = document.getElementById("message-input");
var addButton = document.getElementById("add-button");
var messageList = document.getElementById("message-list");
// 添加留言
function addMessage() {
// 获取输入的留言内容
var newMessage = messageInput.value;
// 将留言添加到数组中
messages.push(newMessage);
// 清空输入框
messageInput.value = "";
// 刷新留言列表
refreshMessageList();
}
// 刷新留言列表
function refreshMessageList() {
// 清空留言列表
messageList.innerHTML = "";
// 遍历留言数组,将每条留言添加到留言列表中
for (var i = 0; i < messages.length; i++) {
var message = messages[i];
var messageItem = document.createElement("li");
messageItem.textContent = message;
messageList.appendChild(messageItem);
}
}
// 绑定添加留言按钮的点击事件
addButton.addEventListener("click", addMessage);
```
这个示例使用了一个数组来保存留言,通过输入框和添加按钮与用户进行交互,使用 `innerHTML` 属性和 `createElement` 方法来动态更新页面中的留言列表。