QQ风格客服聊天窗口

- 展示
- 引入方式

展示

在这里插入图片描述

引入方式

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>QQ风格客服聊天窗口</title><style>body {font-family: 'Microsoft YaHei', sans-serif;display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;background-color: #000000;}.chat-container {width: 800px;height: 500px;border-radius: 5px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);display: flex;flex-direction: column;overflow: hidden;}.chat-header {background: linear-gradient(to right, #12B7F5, #1E90FF);color: white;padding: 10px 15px;display: flex;justify-content: space-between;align-items: center;}.chat-title {font-weight: bold;font-size: 16px;}.close-btn {cursor: pointer;font-size: 18px;}.chat-messages {flex: 1;padding: 10px;background-color: #f0f0f0;overflow-y: auto;}.message {margin-bottom: 15px;display: flex;flex-direction: column;}.message-content {max-width: 70%;padding: 8px 12px;border-radius: 5px;position: relative;word-wrap: break-word;}.received .message-content {background-color: white;align-self: flex-start;border-top-left-radius: 0;}.sent .message-content {background-color: #9EEA6A;align-self: flex-end;border-top-right-radius: 0;}.message-time {font-size: 10px;color: #999;margin-top: 3px;}.received .message-time {align-self: flex-start;}.sent .message-time {align-self: flex-end;}.chat-input {display: flex;padding: 10px;background-color: #f9f9f9;border-top: 1px solid #ddd;}.chat-input textarea {flex: 1;border: 1px solid #ddd;border-radius: 3px;padding: 8px;resize: none;outline: none;font-family: inherit;height: 60px;}.send-btn {background-color: #1E90FF;color: white;border: none;border-radius: 3px;padding: 0 15px;margin-left: 10px;cursor: pointer;outline: none;}.send-btn:hover {background-color: #187bcd;}</style>
</head>
<body><!-- ## 引入方式## 必须方入文件<h1 onclick="gokefu();">1111</h1><script>function gokefu(key) {if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Phone)/i))) {window.open("./kefu.html");} else {window.open("./kefu.html");}}</script> --><div class="chat-container"><div class="chat-header"><div class="chat-title">在线客服</div><div class="close-btn">×</div></div><div class="chat-messages" id="messages"><!-- 消息将在这里动态添加 --></div><div class="chat-input"><textarea id="userInput" placeholder="请输入消息..."></textarea><button class="send-btn" id="sendBtn">发送</button></div></div><script>document.addEventListener('DOMContentLoaded', function() {const messagesContainer = document.getElementById('messages');const userInput = document.getElementById('userInput');const sendBtn = document.getElementById('sendBtn');const closeBtn = document.querySelector('.close-btn');// 配置自动回复消息const autoReplies = ["您好，欢迎咨询我们的客服系统。","请问有什么可以帮您的吗？","我们的工作时间是周一至周五9:00-18:00。","如需人工服务，请稍等片刻，我们将尽快为您转接。","感谢您的咨询，祝您生活愉快！"];let currentReplyIndex = 0;let replyInterval;// 添加消息到聊天窗口function addMessage(content, isReceived) {const messageDiv = document.createElement('div');messageDiv.className = `message ${isReceived ? 'received' : 'sent'}`;const now = new Date();const timeString = `${now.getHours()}:${now.getMinutes().toString().padStart(2, '0')}`;messageDiv.innerHTML = `<div class="message-content">${content}</div><div class="message-time">${timeString}</div>`;messagesContainer.appendChild(messageDiv);messagesContainer.scrollTop = messagesContainer.scrollHeight;}// 发送用户消息function sendUserMessage() {const message = userInput.value.trim();if (message) {addMessage(message, false);userInput.value = '';// 用户发送消息后开始自动回复if (!replyInterval) {startAutoReply();}}}// 开始自动回复function startAutoReply() {// 先立即发送第一条if (currentReplyIndex < autoReplies.length) {addMessage(autoReplies[currentReplyIndex], true);currentReplyIndex++;}// 设置定时器发送剩余消息replyInterval = setInterval(() => {if (currentReplyIndex < autoReplies.length) {addMessage(autoReplies[currentReplyIndex], true);currentReplyIndex++;} else {clearInterval(replyInterval);replyInterval = null;}}, 5000); // 每10秒发送一条}// 事件监听sendBtn.addEventListener('click', sendUserMessage);userInput.addEventListener('keypress', function(e) {if (e.key === 'Enter' && !e.shiftKey) {e.preventDefault();sendUserMessage();}});closeBtn.addEventListener('click', function() {document.querySelector('.chat-container').style.display = 'none';if (replyInterval) {clearInterval(replyInterval);}});// 初始欢迎消息setTimeout(() => {addMessage("您好，欢迎使用我们的客服系统，请问有什么可以帮您的？", true);}, 500);startAutoReply();});</script>
</body>
</html>