html实现聊天对话框

要实现一个基本的聊天对话框，可以使用HTML、CSS和JavaScript。下面是一个简单的示例：

HTML代码：

<div id="chatbox">
  <div class="message received">
    <p>Hello!</p>
  </div>
  <div class="message sent">
    <p>Hi there!</p>
  </div>
</div>
<form id="chat-form">
  <input type="text" placeholder="Type your message here...">
  <button type="submit">Send</button>
</form>

CSS代码：

#chatbox {
  height: 300px;
  overflow-y: scroll;
  background-color: #f2f2f2;
  padding: 10px;
}

.message {
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 10px;
  max-width: 80%;
}

.received {
  background-color: #e6e6e6;
  float: left;
}

.sent {
  background-color: #007bff;
  color: #fff;
  float: right;
}

#chat-form {
  margin-top: 10px;
}

#chat-form input[type="text"] {
  width: 80%;
  padding: 10px;
  border: none;
  border-radius: 20px;
  margin-right: 10px;
}

#chat-form button {
  padding: 10px;
  border: none;
  border-radius: 20px;
  background-color: #007bff;
  color: #fff;
}

JavaScript代码：

const form = document.querySelector('#chat-form');
const input = document.querySelector('#chat-form input');
const chatbox = document.querySelector('#chatbox');

form.addEventListener('submit', (e) => {
  e.preventDefault();
  const message = input.value.trim();
  if (message !== '') {
    sendMessage(message, 'sent');
    input.value = '';
  }
});

function sendMessage(message, type) {
  const div = document.createElement('div');
  div.classList.add('message', type);
  div.innerHTML = `<p>${message}</p>`;
  chatbox.appendChild(div);
  chatbox.scrollTop = chatbox.scrollHeight;
}

这个示例包括一个聊天框和一个表单，用户可以在表单中输入信息并发送。消息将以“sent”或“received”的形式显示在聊天框中，具体取决于是用户还是机器人发送的消息。CSS样式用于美化聊天框和消息，JavaScript代码用于处理表单提交和消息显示。