js实现网页简易留言板
时间: 2023-12-06 11:03:28 浏览: 34
以下是一个基于JavaScript的简易留言板示例:
HTML部分:
```
<!DOCTYPE html>
<html>
<head>
<title>留言板</title>
</head>
<body>
<h1>留言板</h1>
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br>
<label for="message">留言:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea><br>
<button type="button" onclick="addMessage()">提交</button>
</form>
<ul id="messageList"></ul>
<script src="script.js"></script>
</body>
</html>
```
JavaScript部分:
```
let messages = [];
function addMessage() {
let name = document.getElementById("name").value;
let message = document.getElementById("message").value;
messages.push({name: name, message: message});
displayMessages();
}
function displayMessages() {
let messageList = document.getElementById("messageList");
messageList.innerHTML = "";
for (let i = 0; i < messages.length; i++) {
let li = document.createElement("li");
let text = document.createTextNode(messages[i].name + ": " + messages[i].message);
li.appendChild(text);
messageList.appendChild(li);
}
}
```
这个留言板将姓名和留言信息存储在一个JavaScript数组中,并在提交按钮点击时调用addMessage()函数将新留言添加到数组中。 然后,调用displayMessages()函数来更新留言列表。 这里使用了HTML的ul和li元素来显示留言列表。