用 html5写一个留言板 同时留言可以在页面里滚动显示并用json文件存储留言
时间: 2023-05-16 20:05:11 浏览: 114
好的,这是一个比较常见的需求,可以使用HTML5和JavaScript来实现。首先,我们需要创建一个HTML页面,包含一个表单用于提交留言,以及一个用于显示留言的区域。然后,我们可以使用JavaScript来处理表单提交事件,将留言保存到JSON文件中,并将留言显示在页面上。
以下是一个简单的示例代码:
HTML部分:
```
<!DOCTYPE html>
<html>
<head>
<title>留言板</title>
<meta charset="utf-8">
<style>
#messages {
height: 300px;
overflow-y: scroll;
}
</style>
</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"></textarea><br>
<input type="submit" value="提交">
</form>
<div id="messages"></div>
<script src="message_board.js"></script>
</body>
</html>
```
JavaScript部分:
```
// 读取留言
function loadMessages() {
fetch('messages.json')
.then(response => response.json())
.then(messages => {
const messagesDiv = document.getElementById('messages');
messagesDiv.innerHTML = '';
messages.forEach(message => {
const messageDiv = document.createElement('div');
messageDiv.innerHTML = `<strong>${message.name}:</strong>${message.message}`;
messagesDiv.appendChild(messageDiv);
});
});
}
// 保存留言
function saveMessage(name, message) {
fetch('messages.json', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ name, message })
})
.then(() => {
loadMessages();
});
}
// 处理表单提交事件
const form = document.querySelector('form');
form.addEventListener('submit', event => {
event.preventDefault();
const name = document.getElementById('name').value;
const message = document.getElementById('message').value;
saveMessage(name, message);
form.reset();
});
// 页面加载时读取留言
loadMessages();
```
这个示例代码使用了fetch API来读取和保存JSON文件,需要在服务器环境下运行。如果你想在本地环境下运行,可以使用Python的SimpleHTTPServer模块来启动一个简单的HTTP服务器。