怎样用js脚本制作简易聊天窗口_js聊天界面功能脚本编写教程-js教程-PHP中文网

怎样用js脚本制作简易聊天窗口_js聊天界面功能脚本编写教程

星夢妙者

发布： 2025-11-14 12:12:07

原创

876人浏览过

答案：使用HTML、CSS和JavaScript可创建简易聊天窗口，先搭建包含消息区、输入框和按钮的结构，再通过CSS美化界面，最后用JS实现消息发送、时间戳显示及自动回复功能，并支持回车发送与滚动到底部，适合初学者练习或原型设计。

怎样用js脚本制作简易聊天窗口_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> 标签中添加以下代码：

极简智能王

极简智能- 智能聊天AI绘画，还可以创作、编写、翻译、写代码等多种功能，满足用户生活和工作的多方面需求

查看详情

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(); } }); });