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>
】家政平臺蛻變記：性能優化與代碼重構揭秘)
】解鎖家政平臺測試秘籍：計劃與策略全解析)
)
