答案：使用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 = ` ${messageText} ${formatTime(now)}`;// 添加到消息区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 = ` ${randomReply} ${formatTime(now)}`;messagesContainer.appendChild(replyElement);messagesContainer.scrollTop = messagesContainer.scrollHeight;
}
// 绑定发送按钮点击事件sendButton.addEventListener('click', sendMessage);
// 支持回车发送messageInput.addEventListener('keypress', function (e) {if (e.key === 'Enter') {sendMessage();}});});
4. 功能扩展建议
这个简易版本可以继续增强，比如：
加入用户头像或名称显示本地存储消息记录（localStorage）支持表情符号或图片消息连接 WebSocket 实现真实多人聊天添加“正在输入”提示效果
基本上就这些。通过以上步骤，你已经可以用纯前端技术实现一个能发消息、带回复、有样式的小型聊天窗口。适合用于网页嵌入、练习项目或客服原型设计。不复杂但容易忽略细节，比如滚动条控制和输入验证。
以上就是怎样用js脚本制作简易聊天窗口_js聊天界面功能脚本编写教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1538727.html
微信扫一扫 
支付宝扫一扫 
