用HTML+CSS+JS写一个聊天气泡框

好的，以下是一个简单的聊天气泡框示例，使用HTML、CSS和JavaScript：

HTML：

<div class="chat-container">
  <div class="chat-bubble outgoing">
    <p>Hello!</p>
  </div>
  <div class="chat-bubble incoming">
    <p>Hi there!</p>
  </div>
</div>

CSS：

.chat-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  height: 400px;
  padding: 20px;
  overflow-y: scroll;
}

.chat-bubble {
  display: inline-block;
  max-width: 200px;
  margin: 10px;
  padding: 10px;
  border-radius: 20px;
  font-size: 16px;
  line-height: 1.4;
}

.outgoing {
  background-color: #0084ff;
  color: #fff;
  align-self: flex-end;
}

.incoming {
  background-color: #f1f0f0;
  color: #000;
  align-self: flex-start;
}

JavaScript：

// 获取聊天框容器元素
const chatContainer = document.querySelector('.chat-container');

// 添加新的聊天气泡
function addChatBubble(message, outgoing) {
  const bubble = document.createElement('div');
  bubble.classList.add('chat-bubble');
  bubble.classList.add(outgoing ? 'outgoing' : 'incoming');
  bubble.innerHTML = `<p>${message}</p>`;
  chatContainer.appendChild(bubble);
}

// 测试
addChatBubble('Hello!', true);
addChatBubble('Hi there!', false);

这个示例创建了一个简单的聊天气泡框，使用了flex布局和圆角边框来实现。addChatBubble函数用于添加新的聊天气泡，可以根据需要设置出站消息或入站消息。