答案：使用HTML、CSS和JavaScript可创建简易聊天窗口，先搭建包含消息区、输入框和按钮的结构，再通过CSS美化界面，最后用JS实现消息发送、时间戳显示及自动回复功能，并支持回车发送与滚动到底部，适合初学者练习或原型设计。
想要用 JavaScript 制作一个简易的聊天窗口，其实并不复杂。只需要结合 HTML、CSS 和 JS 三者，就能实现基本的消息发送、显示和时间戳功能。下面是一个实用的入门教程，带你一步步写出一个可运行的简易聊天界面。
1. 搭建基础 HTML 结构
先创建一个简单的页面结构，包含消息展示区、输入框和发送按钮。
2. 添加基础 CSS 样式
让聊天窗口看起来更像样，设置消息气泡、布局和滚动区域。
#chat-container {
width: 300px;
border: 1px solid #ccc;
border-radius: 8px;
overflow: hidden;
font-family: Arial, sans-serif;
}
chat-messages {
height: 400px;
overflow-y: auto;
padding: 10px;
background-color: #f9f9f9;
}
.message {
margin-bottom: 10px;
padding: 8px 12px;
border-radius: 16px;
max-width: 80%;
word-wrap: break-word;
}
.sent {
background-color: #007bff;
color: white;
margin-left: auto;
text-align: right;
}
.received {
background-color: #e5e5ea;
color: black;
margin-right: auto;
}
chat-input-area {
display: flex;
padding: 10px;
background-color: #f1f1f1;
}
message-input {
flex: 1;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
outline: none;
}
send-btn {
margin-left: 10px;
padding: 10px 15px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
3. 编写核心 JavaScript 脚本
使用 JS 实现消息发送、显示和自动滚动功能。
在 标签中添加以下代码：
document.addEventListener('DOMContentLoaded', function () {
const messagesContainer = document.getElementById('chat-messages');
const messageInput = document.getElementById('message-input');
const sendButton = document.getElementById('send-btn');
// 发送消息函数
function sendMessage() {
const messageText = messageInput.value.trim();
if (messageText === '') return;
// 创建消息元素
const messageElement = document.createElement('div');
messageElement.classList.add('message', 'sent');
// 添加内容和时间
const now = new Date();
messageElement.innerHTML = `
zuojiankuohaophpcndivyoujiankuohaophpcn${messageText}zuojiankuohaophpcn/divyoujiankuohaophpcn
zuojiankuohaophpcnsmall style="opacity: 0.7; font-size: 0.8em;"youjiankuohaophpcn${formatTime(now)}zuojiankuohaophpcn/smallyoujiankuohaophpcn
`;
// 添加到消息区
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 = `
zuojiankuohaophpcndivyoujiankuohaophpcn${randomReply}zuojiankuohaophpcn/divyoujiankuohaophpcn
zuojiankuohaophpcnsmall style="opacity: 0.7; font-size: 0.8em;"youjiankuohaophpcn${formatTime(now)}zuojiankuohaophpcn/smallyoujiankuohaophpcn
`;
messagesContainer.appendChild(replyElement);
messagesContainer.scrollTop = messagesContainer.scrollHeight;}
// 绑定发送按钮点击事件
sendButton.addEventListener('click', sendMessage);
// 支持回车发送
messageInput.addEventListener('keypress', function (e) {
if (e.key === 'Enter') {
sendMessage();
}
});
});
4. 功能扩展建议
这个简易版本可以继续增强，比如：
- 加入用户头像或名称显示
- 本地存储消息记录（localStorage）
- 支持表情符号或图片消息
- 连接 WebSocket 实现真实多人聊天
- 添加“正在输入”提示效果
基本上就这些。通过以上步骤，你已经可以用纯前端技术实现一个能发消息、带回复、有样式的小型聊天窗口。适合用于网页嵌入、练习项目或客服原型设计。不复杂但容易忽略细节，比如滚动条控制和输入验证。
