前端实现聊天窗口
时间: 2023-07-12 19:19:04 浏览: 88
实现聊天窗口可以使用HTML、CSS和JavaScript。以下是一种简单的实现方式:
HTML:
```
<div class="chat-window">
<div class="chat-header">
<div class="chat-title">与XXX的聊天</div>
</div>
<div class="chat-body">
<div class="message received">
<div class="message-content">你好,有什么需要帮助的吗?</div>
</div>
<div class="message sent">
<div class="message-content">你好,我想问一下关于XXX的问题。</div>
</div>
</div>
<div class="chat-footer">
<input type="text" placeholder="输入消息...">
<button>发送</button>
</div>
</div>
```
CSS:
```
.chat-window {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
height: 400px;
border: 1px solid #ccc;
border-radius: 4px;
overflow: hidden;
}
.chat-header {
height: 40px;
background-color: #f6f6f6;
border-bottom: 1px solid #ccc;
padding: 10px;
}
.chat-title {
font-size: 16px;
font-weight: bold;
}
.chat-body {
height: 280px;
overflow-y: scroll;
padding: 10px;
}
.message {
margin-bottom: 10px;
}
.received {
text-align: left;
}
.sent {
text-align: right;
}
.message-content {
display: inline-block;
padding: 6px 12px;
border-radius: 4px;
background-color: #f6f6f6;
border: 1px solid #ccc;
max-width: 70%;
}
.chat-footer {
height: 80px;
background-color: #f6f6f6;
border-top: 1px solid #ccc;
padding: 10px;
}
.chat-footer input {
width: 70%;
padding: 6px 12px;
border-radius: 4px;
border: 1px solid #ccc;
}
.chat-footer button {
width: 25%;
padding: 6px 12px;
border-radius: 4px;
border: none;
background-color: #4CAF50;
color: white;
cursor: pointer;
}
```
JavaScript:
```
var chatWindow = document.querySelector('.chat-window');
var messageInput = chatWindow.querySelector('input');
var messageList = chatWindow.querySelector('.chat-body');
var sendButton = chatWindow.querySelector('button');
sendButton.addEventListener('click', function() {
var messageContent = messageInput.value;
if (messageContent.trim() === '') {
return;
}
var message = document.createElement('div');
var messageContentDiv = document.createElement('div');
if (chatWindow.classList.contains('sent')) {
message.classList.add('message', 'sent');
messageContentDiv.classList.add('message-content');
messageContentDiv.textContent = messageContent;
message.appendChild(messageContentDiv);
} else {
message.classList.add('message', 'received');
messageContentDiv.classList.add('message-content');
messageContentDiv.textContent = '对方说:' + messageContent;
message.appendChild(messageContentDiv);
}
messageList.appendChild(message);
messageList.scrollTop = messageList.scrollHeight;
messageInput.value = '';
});
messageInput.addEventListener('keydown', function(event) {
if (event.keyCode === 13) {
event.preventDefault();
sendButton.click();
}
});
chatWindow.addEventListener('click', function(event) {
if (event.target === chatWindow) {
chatWindow.classList.toggle('sent');
}
});
```
注意:以上代码仅供参考,具体实现还需要根据实际需求进行调整。