用 html5写一个留言板 同时留言可以在页面里滚动显示并用json文件存储留言
时间: 2023-05-14 22:06:55 浏览: 80
好的，这是一个比较简单的任务。你可以使用HTML5、CSS和JavaScript来创建一个留言板。首先，你需要创建一个HTML页面，包含一个表单，让用户输入留言。然后，你可以使用JavaScript来处理表单提交事件，将留言存储到一个JSON文件中。最后，你可以使用JavaScript来读取JSON文件中的留言，并将它们显示在页面上，可以使用CSS来控制留言的样式和滚动效果。如果你需要更详细的代码实现，可以参考一些开源的留言板项目。
相关问题
利用html、css和JS写一个留言面板留言能保存在网页上
好的，下面是一个使用 HTML、CSS 和 JavaScript 编写的留言面板，留言内容可以保存在网页上。
HTML 代码：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>留言面板</title>
<style>
/* 样式表 */
body { font-family: Arial, sans-serif; }
.container { max-width: 800px; margin: 0 auto; }
h1 { text-align: center; }
form { margin-bottom: 20px; }
label { display: block; margin-bottom: 5px; }
input[type="text"], textarea { width: 100%; padding: 10px; margin-bottom: 20px; border: 1px solid #ccc; border-radius: 4px; }
button[type="submit"] { display: block; margin: 0 auto; padding: 10px 20px; background-color: #007bff; color: #fff; border: none; border-radius: 4px; cursor: pointer; }
.messages { list-style: none; padding: 0; margin: 0; }
.message { background-color: #f2f2f2; padding: 10px; margin-bottom: 10px; border-radius: 4px; }
.message h2 { margin-top: 0; }
.message p { margin-bottom: 0; }
</style>
</head>
<body>
<div class="container">
<h1>留言面板</h1>
<form>
<label for="name">姓名：</label>
<input type="text" id="name" required>
<label for="email">邮箱：</label>
<input type="text" id="email" required>
<label for="message">留言：</label>
<textarea id="message" required></textarea>
<button type="submit">提交留言</button>
</form>
<ul class="messages"></ul>
</div>
<script src="app.js"></script>
</body>
</html>
```
CSS 代码：
```css
/* 样式表 */
body { font-family: Arial, sans-serif; }
.container { max-width: 800px; margin: 0 auto; }
h1 { text-align: center; }
form { margin-bottom: 20px; }
label { display: block; margin-bottom: 5px; }
input[type="text"], textarea { width: 100%; padding: 10px; margin-bottom: 20px; border: 1px solid #ccc; border-radius: 4px; }
button[type="submit"] { display: block; margin: 0 auto; padding: 10px 20px; background-color: #007bff; color: #fff; border: none; border-radius: 4px; cursor: pointer; }
.messages { list-style: none; padding: 0; margin: 0; }
.message { background-color: #f2f2f2; padding: 10px; margin-bottom: 10px; border-radius: 4px; }
.message h2 { margin-top: 0; }
.message p { margin-bottom: 0; }
```
JavaScript 代码：
```js
const form = document.querySelector('form');
const messages = document.querySelector('.messages');
// 从 localStorage 中获取留言列表
let messageList = JSON.parse(localStorage.getItem('messages')) || [];
// 显示留言列表
function displayMessages() {
messages.innerHTML = '';
messageList.forEach(message => {
const li = document.createElement('li');
const h2 = document.createElement('h2');
const p1 = document.createElement('p');
const p2 = document.createElement('p');
h2.textContent = message.name;
p1.textContent = message.email;
p2.textContent = message.message;
li.classList.add('message');
li.appendChild(h2);
li.appendChild(p1);
li.appendChild(p2);
messages.appendChild(li);
});
}
// 提交表单
form.addEventListener('submit', event => {
event.preventDefault(); // 阻止表单默认提交行为
const name = form.querySelector('#name').value;
const email = form.querySelector('#email').value;
const message = form.querySelector('#message').value;
messageList.push({ name, email, message }); // 将留言添加到列表中
localStorage.setItem('messages', JSON.stringify(messageList)); // 将留言列表保存到 localStorage 中
form.reset(); // 重置表单
displayMessages(); // 显示留言列表
});
displayMessages(); // 页面加载时显示留言列表
```
这个留言面板使用了 HTML、CSS 和 JavaScript 技术，在页面中显示留言列表和留言表单。当用户提交留言时，它会将留言添加到 JavaScript 数组中，并将留言列表保存到 localStorage 中。当用户访问页面时，它会从 localStorage 中加载留言列表并将其显示在页面上。
请注意，这个留言面板仅用于示例目的，没有进行任何安全性和错误处理，您需要根据自己的需求进行适当的修改和改进。
利用html、css和JS写一个留言面板，并且留言能保存在网页里面的盒子里面，盒子具有删除的功能
好的，我可以为您提供一个简单的留言板示例，使用HTML、CSS和JS编写，您可以根据您的需求进行修改和扩展。
HTML代码：
```html
<div class="container">
<h2>留言板</h2>
<form>
<label for="name">姓名：</label>
<input type="text" id="name" name="name" required>
<br>
<label for="message">留言：</label>
<textarea id="message" name="message" required></textarea>
<br>
<button id="submit">提交</button>
</form>
<div id="messageBox"></div>
</div>
```
CSS代码：
```css
.container {
margin: 20px auto;
max-width: 600px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
font-family: Arial, sans-serif;
}
h2 {
text-align: center;
}
form {
display: flex;
flex-direction: column;
align-items: center;
}
label {
font-weight: bold;
}
input[type="text"],
textarea {
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
border: 1px solid #ccc;
width: 100%;
box-sizing: border-box;
}
button {
padding: 10px;
background-color: #008CBA;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #00688B;
}
.message {
margin-top: 20px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f9f9f9;
position: relative;
}
.message p {
margin: 0;
}
.delete {
position: absolute;
top: 5px;
right: 5px;
cursor: pointer;
}
```
JS代码：
```js
const form = document.querySelector('form');
const messageBox = document.getElementById('messageBox');
form.addEventListener('submit', e => {
e.preventDefault();
const name = e.target.elements.name.value;
const message = e.target.elements.message.value;
const timestamp = new Date().toLocaleString();
const id = Date.now();
const messageDiv = document.createElement('div');
messageDiv.classList.add('message');
messageDiv.innerHTML = `
<p><strong>${name}:</strong> ${message}</p>
<p>${timestamp}</p>
<span class="delete" data-id="${id}">×</span>
`;
messageBox.appendChild(messageDiv);
saveMessage(id, name, message, timestamp);
e.target.reset();
});
messageBox.addEventListener('click', e => {
if (e.target.classList.contains('delete')) {
const id = Number(e.target.getAttribute('data-id'));
const messageDiv = e.target.parentNode;
messageBox.removeChild(messageDiv);
deleteMessage(id);
}
});
function saveMessage(id, name, message, timestamp) {
const messages = JSON.parse(localStorage.getItem('messages') || '[]');
messages.push({ id, name, message, timestamp });
localStorage.setItem('messages', JSON.stringify(messages));
}
function deleteMessage(id) {
const messages = JSON.parse(localStorage.getItem('messages') || '[]');
const index = messages.findIndex(m => m.id === id);
if (index > -1) {
messages.splice(index, 1);
localStorage.setItem('messages', JSON.stringify(messages));
}
}
function renderMessages() {
const messages = JSON.parse(localStorage.getItem('messages') || '[]');
messages.forEach(m => {
const messageDiv = document.createElement('div');
messageDiv.classList.add('message');
messageDiv.innerHTML = `
<p><strong>${m.name}:</strong> ${m.message}</p>
<p>${m.timestamp}</p>
<span class="delete" data-id="${m.id}">×</span>
`;
messageBox.appendChild(messageDiv);
});
}
renderMessages();
```
这个留言板使用了本地存储，可以将留言保存在浏览器中，并且具有删除功能，每条留言都有一个唯一的ID。
相关推荐
最新推荐
json获取数据库的信息在前端页面显示方法
今天小编就为大家分享一篇json获取数据库的信息在前端页面显示方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Android读取本地json文件的方法(解决显示乱码问题)
本文实例讲述了Android读取本地json文件的方法。分享给大家供大家参考，具体如下： 1、读取本地JSON ，但是显示汉字乱码 public static String readLocalJson(Context context, String fileName){ String json...
jQuery ajax读取本地json文件的实例
下面小编就为大家带来一篇jQuery ajax读取本地json文件的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
java解析DWG文件为json使用superMap
java使用superMap解析DWG文件为json输出，本地通过，附件中为word操方式按照步骤可以导入数据集
详解vue 模拟后台数据（加载本地json文件）调试
本篇文章主要介绍了详解vue 模拟后台数据（加载本地json文件）调试，具有一定的参考价值，有兴趣的可以了解一下
zigbee-cluster-library-specification
最新的zigbee-cluster-library-specification说明文档。
管理建模和仿真的文件
管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
实现实时数据湖架构：Kafka与Hive集成
# 1. 实时数据湖架构概述**
实时数据湖是一种现代数据管理架构，它允许企业以低延迟的方式收集、存储和处理大量数据。与传统数据仓库不同，实时数据湖不依赖于预先定义的模式，而是采用灵活的架构，可以处理各种数据类型和格式。这种架构为企业提供了以下优势：
- **实时洞察：**实时数据湖允许企业访问最新的数据，从而做出更明智的决策。
- **数据民主化：**实时数据湖使各种利益相关者都可
解释minorization-maximization (MM) algorithm，并给出matlab代码编写的例子
Minorization-maximization (MM) algorithm是一种常用的优化算法，用于求解非凸问题或含有约束的优化问题。该算法的基本思想是通过构造一个凸下界函数来逼近原问题，然后通过求解凸下界函数的最优解来逼近原问题的最优解。具体步骤如下：
1. 初始化参数 $\theta_0$，设 $k=0$；
2. 构造一个凸下界函数 $Q(\theta|\theta_k)$，使其满足 $Q(\theta_k|\theta_k)=f(\theta_k)$；
3. 求解 $Q(\theta|\theta_k)$ 的最优值 $\theta_{k+1}=\arg\min_\theta Q(
JSBSim Reference Manual
JSBSim参考手册，其中包含JSBSim简介，JSBSim配置文件xml的编写语法，编程手册以及一些应用实例等。其中有部分内容还没有写完，估计有生之年很难看到完整版了，但是内容还是很有参考价值的。