利用html、css和JS写一个留言面板，并且留言能保存在网页里面的盒子里面，盒子具有删除的功能

好的，我可以为您提供一个简单的留言板示例，使用HTML、CSS和JS编写，您可以根据您的需求进行修改和扩展。

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代码：

.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代码：

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}">&times;</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}">&times;</span>
    `;
    messageBox.appendChild(messageDiv);
  });
}

renderMessages();

这个留言板使用了本地存储，可以将留言保存在浏览器中，并且具有删除功能，每条留言都有一个唯一的ID。