js实现聊天窗口

实现聊天窗口的基本结构

使用HTML和CSS构建聊天窗口的界面框架。HTML部分需要包含消息显示区域和输入框，CSS用于美化界面。

<div class="chat-container">
  <div class="chat-messages" id="messages"></div>
  <div class="chat-input">
    <input type="text" id="messageInput" placeholder="Type a message...">
    <button id="sendButton">Send</button>
  </div>
</div>

.chat-container {
  width: 300px;
  height: 400px;
  border: 1px solid #ccc;
  display: flex;
  flex-direction: column;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}

.chat-input {
  display: flex;
  padding: 10px;
}

#messageInput {
  flex: 1;
  margin-right: 10px;
}

处理消息发送功能

通过JavaScript实现消息发送和显示功能。监听发送按钮点击事件和输入框回车事件。

const messagesContainer = document.getElementById('messages');
const messageInput = document.getElementById('messageInput');
const sendButton = document.getElementById('sendButton');

function sendMessage() {
  const messageText = messageInput.value.trim();
  if (messageText) {
    addMessage(messageText, 'user');
    messageInput.value = '';
    // 这里可以添加发送到服务器的逻辑
  }
}

function addMessage(text, sender) {
  const messageElement = document.createElement('div');
  messageElement.classList.add('message', sender);
  messageElement.textContent = text;
  messagesContainer.appendChild(messageElement);
  messagesContainer.scrollTop = messagesContainer.scrollHeight;
}

sendButton.addEventListener('click', sendMessage);
messageInput.addEventListener('keypress', (e) => {
  if (e.key === 'Enter') sendMessage();
});

添加样式区分消息

通过CSS为不同发送者的消息添加不同样式，增强视觉区分。

.message {
  margin: 5px 0;
  padding: 8px 12px;
  border-radius: 18px;
  max-width: 70%;
}

.user {
  background-color: #007bff;
  color: white;
  align-self: flex-end;
}

.bot {
  background-color: #f1f1f1;
  align-self: flex-start;
}

实现简单的自动回复

模拟聊天机器人功能，在用户发送消息后自动回复。

function sendMessage() {
  const messageText = messageInput.value.trim();
  if (messageText) {
    addMessage(messageText, 'user');
    messageInput.value = '';

    // 模拟自动回复
    setTimeout(() => {
      addMessage('This is an automated reply', 'bot');
    }, 500);
  }
}

添加时间戳显示

增强聊天窗口的功能，为每条消息添加发送时间。

function addMessage(text, sender) {
  const messageElement = document.createElement('div');
  messageElement.classList.add('message-container', sender);

  const timeElement = document.createElement('div');
  timeElement.classList.add('time');
  timeElement.textContent = new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});

  const textElement = document.createElement('div');
  textElement.classList.add('message');
  textElement.textContent = text;

  messageElement.appendChild(textElement);
  messageElement.appendChild(timeElement);

  messagesContainer.appendChild(messageElement);
  messagesContainer.scrollTop = messagesContainer.scrollHeight;
}

.message-container {
  display: flex;
  flex-direction: column;
  margin: 5px 0;
  max-width: 70%;
}

.message-container.user {
  align-self: flex-end;
  align-items: flex-end;
}

.message-container.bot {
  align-self: flex-start;
  align-items: flex-start;
}

.time {
  font-size: 0.7em;
  color: #666;
  margin-top: 2px;
}

持久化聊天记录

使用localStorage保存聊天记录，实现页面刷新后不丢失消息。

// 加载保存的消息
function loadMessages() {
  const savedMessages = localStorage.getItem('chatMessages');
  if (savedMessages) {
    messagesContainer.innerHTML = savedMessages;
    messagesContainer.scrollTop = messagesContainer.scrollHeight;
  }
}

// 保存消息到localStorage
function saveMessages() {
  localStorage.setItem('chatMessages', messagesContainer.innerHTML);
}

// 修改sendMessage函数
function sendMessage() {
  const messageText = messageInput.value.trim();
  if (messageText) {
    addMessage(messageText, 'user');
    messageInput.value = '';
    saveMessages();

    setTimeout(() => {
      addMessage('This is an automated reply', 'bot');
      saveMessages();
    }, 500);
  }
}

// 页面加载时加载消息
window.addEventListener('load', loadMessages);