html用js制作简易留言板
时间: 2023-12-24 15:05:50 浏览: 30
好的,以下是一个简易的留言板的html和js代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>留言板</title>
<style>
input[type="text"], textarea {
display: block;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>留言板</h1>
<form>
<label for="name">姓名:</label>
<input type="text" id="name" required>
<label for="message">留言:</label>
<textarea id="message" required></textarea>
<button id="submit">提交</button>
</form>
<div id="messages"></div>
<script>
// 留言数组
var messages = [];
// 获取表单元素和留言板元素
var form = document.querySelector('form');
var nameInput = document.querySelector('#name');
var messageInput = document.querySelector('#message');
var messagesDiv = document.querySelector('#messages');
// 提交表单时添加留言
form.addEventListener('submit', function(e) {
e.preventDefault();
// 获取表单数据
var name = nameInput.value;
var message = messageInput.value;
// 创建留言对象
var newMessage = {
name: name,
message: message
};
// 添加到数组
messages.push(newMessage);
// 清空表单
nameInput.value = '';
messageInput.value = '';
// 刷新留言列表
displayMessages();
});
// 刷新留言列表
function displayMessages() {
// 清空留言列表
messagesDiv.innerHTML = '';
// 循环遍历留言数组,创建留言元素并添加到留言列表
for (var i = 0; i < messages.length; i++) {
var message = messages[i];
var messageDiv = document.createElement('div');
messageDiv.innerHTML = '<strong>' + message.name + ':</strong>' + message.message;
messagesDiv.appendChild(messageDiv);
}
}
</script>
</body>
</html>
```
这个留言板包括一个表单和一个留言列表。当用户提交表单时,会将表单数据保存到一个留言对象中,然后将留言对象添加到留言数组中,并且刷新留言列表。留言列表会循环遍历留言数组,并创建留言元素添加到留言列表中。