答案：使用HTML、CSS和JavaScript可创建简易聊天窗口，先搭建包含消息区、输入框和按钮的结构，再通过CSS美化界面，最后用JS实现消息发送、时间戳显示及自动回复功能，并支持回车发送与滚动到底部，适合初学者练习或原型设计。
想要用 JavaScript 制作一个简易的聊天窗口，其实并不复杂。只需要结合 HTML、CSS 和 JS 三者，就能实现基本的消息发送、显示和时间戳功能。下面是一个实用的入门教程，带你一步步写出一个可运行的简易聊天界面。
1. 搭建基础 HTML 结构
先创建一个简单的页面结构，包含消息展示区、输入框和发送按钮。
<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>
2. 添加基础 CSS 样式
让聊天窗口看起来更像样，设置消息气泡、布局和滚动区域。
#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>3. 编写核心 JavaScript 脚本
使用 JS 实现消息发送、显示和自动滚动功能。
在 <script></script> 标签中添加以下代码：
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(); } }); });
4. 功能扩展建议
这个简易版本可以继续增强，比如：
- 加入用户头像或名称显示
- 本地存储消息记录（localStorage）
- 支持表情符号或图片消息
- 连接 WebSocket 实现真实多人聊天
- 添加“正在输入”提示效果
基本上就这些。通过以上步骤，你已经可以用纯前端技术实现一个能发消息、带回复、有样式的小型聊天窗口。适合用于网页嵌入、练习项目或客服原型设计。不复杂但容易忽略细节，比如滚动条控制和输入验证。
