帮我用JS写一个 有发布,删除功能的论坛代码
时间: 2024-05-01 20:17:56 浏览: 7
好的,以下是一份简单的带有发布和删除功能的论坛代码,使用的是JS语言:
HTML部分:
```html
<div>
<h1>论坛</h1>
<input type="text" placeholder="输入内容" id="input" />
<button onclick="addMessage()">发布</button>
</div>
<div id="messages">
</div>
```
JS部分:
```javascript
// 存储消息的数组
var messages = [];
// 添加消息
function addMessage() {
var input = document.getElementById("input");
var message = input.value;
messages.push(message);
renderMessages();
input.value = "";
}
// 渲染所有的消息
function renderMessages() {
var html = "";
for (var i = 0; i < messages.length; i++) {
html += "<div>" + messages[i] +
" <button onclick='deleteMessage(" + i + ")'>删除</button>" +
"</div>";
}
document.getElementById("messages").innerHTML = html;
}
// 删除消息
function deleteMessage(index) {
messages.splice(index, 1);
renderMessages();
}
// 进入页面后渲染所有的消息
renderMessages();
```
这份代码包括一个输入框、一个发布按钮、一个消息列表及删除按钮。用户在输入框中输入消息后,可以点击发布按钮将消息发布到列表中。 每一个消息都有一个“删除”按钮,用户可以点击它来删除这条消息。