<div id="chat-container">
  <div id="chat-messages"></div>
  <div id="chat-input-area">
    <input type="text" id="message-input" placeholder="输入消息...">
    <button id="send-btn">发送</button>
  </div>
</div>

#chat-container {
  width: 300px;
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
  font-family: Arial, sans-serif;
}
<h1>chat-messages {</h1><p>height: 400px;
overflow-y: auto;
padding: 10px;
background-color: #f9f9f9;
}</p><p>.message {
margin-bottom: 10px;
padding: 8px 12px;
border-radius: 16px;
max-width: 80%;
word-wrap: break-word;
}</p><p>.sent {
background-color: #007bff;
color: white;
margin-left: auto;
text-align: right;
}</p><p>.received {
background-color: #e5e5ea;
color: black;
margin-right: auto;
}</p><h1>chat-input-area {</h1><p>display: flex;
padding: 10px;
background-color: #f1f1f1;
}</p><h1>message-input {</h1><p>flex: 1;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
outline: none;
}</p><h1>send-btn {</h1><p>margin-left: 10px;
padding: 10px 15px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}</p>

document.addEventListener('DOMContentLoaded', function () {
  const messagesContainer = document.getElementById('chat-messages');
  const messageInput = document.getElementById('message-input');
  const sendButton = document.getElementById('send-btn');
<p>// 发送消息函数
function sendMessage() {
const messageText = messageInput.value.trim();
if (messageText === '') return;</p><pre class='brush:php;toolbar:false;'>// 创建消息元素
const messageElement = document.createElement('div');
messageElement.classList.add('message', 'sent');

// 添加内容和时间
const now = new Date();
messageElement.innerHTML = `
  <div>${messageText}</div>
  <small style="opacity: 0.7; font-size: 0.8em;">${formatTime(now)}</small>
`;

// 添加到消息区
messagesContainer.appendChild(messageElement);

// 清空输入框并聚焦
messageInput.value = '';
messageInput.focus();

// 自动滚动到底部
messagesContainer.scrollTop = messagesContainer.scrollHeight;

// 可选：模拟回复
setTimeout(() => {
  autoReply(messageText);
}, 500);

}

// 格式化时间（hh:mm） function formatTime(date) { return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); }

// 模拟自动回复 function autoReply(userMessage) { const replies = [ '收到！', '谢谢你的消息。', '我正在学习中。', '这是个好问题！' ]; const randomReply = replies[Math.floor(Math.random() * replies.length)];

const replyElement = document.createElement('div');
replyElement.classList.add('message', 'received');
const now = new Date();
replyElement.innerHTML = `
  <div>${randomReply}</div>
  <small style="opacity: 0.7; font-size: 0.8em;">${formatTime(now)}</small>
`;
messagesContainer.appendChild(replyElement);
messagesContainer.scrollTop = messagesContainer.scrollHeight;

}

// 绑定发送按钮点击事件 sendButton.addEventListener('click', sendMessage);

// 支持回车发送 messageInput.addEventListener('keypress', function (e) { if (e.key === 'Enter') { sendMessage(); } }); });