当前位置： 首页 > article >正文

QQ风格客服聊天窗口

article 2026/1/26 17:33:22

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>

相关文章：

QQ风格客服聊天窗口

QQ风格客服聊天窗口 展示引入方式 展示 引入方式 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title&g…...

编程日记 2026/1/16 18:29:29

fastadmin后端添加页面,自主控制弹出框关闭,关闭父页面弹框

Form.api.bindevent($(“form[roleform]”), (data, ret) > { 重写绑定事件,返回false即可 注意:只有返回code1才能拦截,其他值不进行拦截 add: function () {//获取当前search里面的type值var type location.search.split(type)[1];Form.api.bindevent($("form[role…...

编程日记 2026/1/9 8:53:40

leetcode572 另一棵树的子树

1.与100、101解法相同 递归&#xff1a; class Solution { private:bool compare(TreeNode* p, TreeNode* q){if(!p && !q) return true;else if(!p || !q) return false;else if(p->val ! q->val) return false;bool leftside compare(p->left, q->lef…...

编程日记 2025/12/15 17:52:04

MCU刷写——Hex文件格式详解及Python代码

工作之余来写写关于MCU的Bootloader刷写的相关知识，以免忘记。今天就来聊聊Hex这种文件的格式，我是分享人M哥，目前从事车载控制器的软件开发及测试工作。 学习过程中如有任何疑问，可底下评论！ 如果觉得文章内容在工作学习中有帮助到你，麻烦点赞收藏评论+关注走一波！感谢…...

编程日记 2026/1/22 15:28:51

ubnetu 服务器版本常用端口和开放的端口对应的应用

1. 使用 netstat 查看端口与进程 netstat 是查看网络连接和监听端口的常用工具。通过以下命令可以列出所有开放的TCP/UDP端口及其关联的进程&#xff1a; sudo netstat -tulnp参数解析&#xff1a; -t&#xff1a;显示TCP端口。 -u&#xff1a;显示UDP端口。 -l&#xff1…...

编程日记 2026/1/7 23:13:12

汇舟问卷：国外问卷调查技巧有哪些，具体该怎么操作

大家好&#xff0c;我是汇舟问卷&#xff0c;今天咱们就聊聊国外问卷答题的技巧和操作步骤&#xff0c;保你听完立马能上手&#xff01; 一、答题前先创建人设 1&#xff0c;进题时先瞄两眼问题&#xff0c;快速判断问卷主题&#xff0c;再定人设。比如遇到奶粉问卷&#xff…...

编程日记 2026/1/20 1:30:19

DeepSeek的神经元革命：穿透搜索引擎算法的下一代内容基建

DeepSeek的神经元革命&#xff1a;穿透搜索引擎算法的下一代内容基建 ——从语义网络到价值共识的范式重构 一、搜索引擎的“内容饥渴症”与AI的基建使命 2024年Q1数据显示&#xff0c;百度索引网页总数突破3500亿&#xff0c;但用户点击集中在0.78%的高价值页面。这种“数据…...

编程日记 2025/11/4 6:16:44

C++标识符：检查是否和保留字冲突

1. 基础知识 最基本的要求&#xff1a; 字母、数字、下划线组成&#xff0c; 并且不能是数字开头。 禁忌1&#xff1a; C 关键字不能用做标识符。 它们是&#xff1a; alignas alignof asm auto bool break case catch char char16_t char32_t class const constexpr const_…...

编程日记 2026/1/18 11:17:03

《Python星球日记》第27天：Seaborn 可视化

名人说&#xff1a;路漫漫其修远兮&#xff0c;吾将上下而求索。—— 屈原《离骚》 创作者&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 专栏&#xff1a;《Python星球日记》&#xff0c;限时特价订阅中ing 目录 一、Seabor…...

编程日记 2026/1/12 22:52:44

自动驾驶技术-相机_IMU时空标定

自动驾驶技术-相机_IMU时空标定 时间延迟 时间延迟 参考链接1、2 相机主要分为全局和卷帘快门相机&#xff0c;从触发到成像的过程包括&#xff1a;复位时间、AE()曝光时间、读出时间 全局快门如下图所示 卷帘快门如下图所示 相机录制视频时&#xff0c;为了保持固定频率&am…...

编程日记 2026/1/16 21:10:31

第十六届蓝桥杯大赛软件赛省赛 Python 大学 B 组 部分题解

题面链接Htlang/2025lqb_python_b 个人觉得今年这套题整体比往年要简单许多&#xff0c;但是G题想简单了出大问题&#xff0c;预估50101015120860&#xff0c;道阻且长&#xff0c;再接再厉 A: 攻击次数 答案&#xff1a;103&#xff1f;181&#xff1f;题目没说明白每回合是…...

编程日记 2025/12/15 9:37:28

HTTP：三.HTTP连接

HTTP（Hypertext Transfer Protocol）是一种用于传输超文本数据的应用层协议。它是互联网上最常用的协议，用于在客户端和服务器之间传输数据。HTTP协议通常用于从Web服务器传输网页和文件到客户端浏览器，并支持其他用途，如传输API数据和传输文件。 HTTP连接是指客户端向服务…...

编程日记 2026/1/13 20:12:24

Oracle 复制表结构（含索引、主键）操作指南

Oracle 复制表结构&#xff08;含索引、主键&#xff09;操作指南 1. 复制基础表结构 -- 创建空表结构&#xff08;不复制数据&#xff09; CREATE TABLE new_table AS SELECT * FROM old_table WHERE 10;2. 复制主键约束 -- 查询原表主键信息 SELECT constraint_name, co…...

编程日记 2025/9/10 3:57:18

”插入排序“”选择排序“

文章目录 插入排序1. 直接插入排序(O(n^2))举例1&#xff1a;举例2&#xff1a;直插排序的"代码"直插排序的“时间复杂度” 2. 希尔排序(O(n^1.3))方法一方法二(时间复杂度更优) 选择排序堆排序直接选择排序 我们学过冒泡排序&#xff0c;堆排序等等。&#xff08;回…...

编程日记 2026/1/16 18:11:42

烟花爆竹储存作业安全要求

烟花爆竹储存作业证是从事相关作业的法定凭证&#xff0c;旨在确保操作人员具备专业知识和安全技能&#xff0c;防止因违规操作引发火灾、爆炸等事故。根据《烟花爆竹安全管理条例》及相关法规&#xff0c;未取得作业证的人员不得从事烟花爆竹储存、搬运、管理等作业。 仓库选址…...

编程日记 2025/11/25 21:12:38

Python深度学习基础——卷积神经网络（CNN）（PyTorch）

CNN原理 从DNN到CNN 卷积层与汇聚 深度神经网络DNN中&#xff0c;相邻层的所有神经元之间都有连接&#xff0c;这叫全连接&#xff1b;卷积神经网络 CNN 中&#xff0c;新增了卷积层&#xff08;Convolution&#xff09;与汇聚&#xff08;Pooling&#xff09;。DNN 的全连接…...

编程日记 2026/1/26 5:51:25

Python（11）Python判断语句全面解析：从基础到高级模式匹配

目录 一、条件逻辑的工程价值1.1 真实项目中的逻辑判断1.2 判断语句类型矩阵 二、基础判断深度解析2.1 多条件联合判断2.2 类型安全判断 三、模式匹配进阶应用3.1 结构化数据匹配3.2 对象模式匹配 四、判断语句优化策略4.1 逻辑表达式优化4.2 性能对比测试 五、典型应用场景实战…...

编程日记 2025/11/25 22:13:01

MTK7628基于原厂的mtk-openwrt-sdk-20160324-8f8e4f1e.tar.bz2 源代码包，配置成单网口模式的方法

一、配置. 在SDK工程下&#xff0c;运行make kernel_menuconfig&#xff0c;如下图所示&#xff1a; Ralink Module --->选上“One Port Only”&#xff0c;如下图所示&#xff1a; 如果P0网口实现WAN口&#xff0c;就配置成W/LLLL,否则就配置成LLLL/W. 二、修改网口的原代…...

编程日记 2026/1/16 0:38:05

艾伦·图灵：计算机科学与人工智能之父

名人说&#xff1a;路漫漫其修远兮&#xff0c;吾将上下而求索。—— 屈原《离骚》 创作者&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 艾伦图灵&#xff1a;计算机科学与人工智能之父 一、天才的诞生与早期生涯 1912年6月…...

编程日记 2026/1/16 22:25:10

策略模式实现 Bean 注入时怎么知道具体注入的是哪个 Bean？

Autowire Resource 的区别 1.来源不同&#xff1a;其中 Autowire 是 Spring2.5 定义的注解&#xff0c;而 Resource 是 Java 定义的注解 2.依赖查找的顺序不同&#xff1a; 依赖注入的功能&#xff0c;是通过先在 Spring IoC 容器中查找对象&#xff0c;再将对象注入引入到当…...

编程日记 2026/1/19 3:28:29

React九案例中

代码下载 地图找房模块 顶部导航栏 封装NavHeader组件实现城市选择&#xff0c;地图找房页面的复用&#xff0c;在 components 目录中创建组件 NavHeader&#xff0c;把之前城市列表写过的样式复制到 NavHeader.scss 下&#xff0c;在该组件中封装 antd-mobile 组件库中的 N…...

编程日记 2026/1/19 6:13:02

第一期：[特殊字符] 深入理解MyBatis[特殊字符]从JDBC到MyBatis——持久层开发的转折点[特殊字符]

前言 &#x1f31f; 在软件开发的过程中&#xff0c;持久层&#xff08;或数据访问层&#xff09;是与数据库进行交互的关键部分。早期&#xff0c;开发者通常使用 JDBC&#xff08;Java Database Connectivity&#xff09;来实现与数据库的连接与操作。虽然 JDBC 在一定程度上…...

编程日记 2026/1/19 6:21:39

Adobe Photoshop 2025 Mac中文 Ps图像编辑

Adobe Photoshop 2025 Mac中文 Ps图像编辑 一、介绍 Adobe Photoshop 2025 Mac版集成了多种强大的图像编辑、处理和创作功能。①强化了Adobe Sensei AI的应用&#xff0c;通过智能抠图、自动修复、图像生成等功能&#xff0c;用户能够快速而精确地编辑图像。②3D编辑和动画功…...

编程日记 2026/1/8 9:01:27

用纯Qt实现GB28181协议/实时视频/云台控制/预置位/录像回放和下载/事件订阅/语音对讲

一、前言 在技术的长河中探索&#xff0c;有些目标一旦确立&#xff0c;便如同璀璨星辰&#xff0c;指引着我们不断前行。早在2014年&#xff0c;我心中就种下了用纯Qt实现GB28181协议的种子&#xff0c;如今回首&#xff0c;一晃十年已逝&#xff0c;好在整体框架和逻辑终于打…...

编程日记 2026/1/8 9:02:03

让你方便快捷实现主题色切换（useCssVar）

文章目录 前言一、useCssVar是什么&#xff1f;二、使用步骤1.安装依赖2.实现主题色切换 总结 前言 使用 CSS 变量&#xff08;CSS Custom Properties&#xff09;实现主题色切换是一种高效且易于维护的方法。通过将主题颜色定义为 CSS 变量&#xff0c;你可以轻松地在不同主题…...

编程日记 2026/1/22 2:15:31

面试之《websocket》

配置环境 mkdir express cd express npm init npm install express ws// index.js var app require("express")(); var WebSocket require("ws");var wss new WebSocket.Server({ port: 8888 });wss.on(connection, function connection(ws) {ws.on(m…...

编程日记 2026/1/19 5:13:48

Linux 内存调优之系统内存全面监控

写在前面 博文内容涉及 Linux 全局内存监控监控方式包括传统工具 vmstat/top/free/sar/slabtop ,以及 systemd-cgtop，proc 内存伪文件系统监控内容包括进程内存使用情况， 内存全局数据统计，内存事件指标，以及进程内存段数据监控理解不足小伙伴帮忙指正 😃,生活加油我看远…...

编程日记 2025/11/5 17:52:34

每天学一个 Linux 命令（14）：cat

Linux 文件查看与合并命令：cat cat（全称 concatenate）是 Linux 中用于查看文件内容、合并文件或创建简单文件的基础命令。它操作简单但功能灵活，是日常文件处理的常用工具。 1. 命令作用 查看文件内容：直接输出文件内容到终端。合并文件：将多个文件内容合并输出或保存到…...

编程日记 2026/1/8 8:28:54

L36.【LeetCode题解】查找总价格为目标值的两个商品(剑指offer:和为s的两个数字) (双指针思想,内含详细的优化过程)

目录 1.LeetCode题目 2.分析 方法1:暴力枚举(未优化的双指针) 方法2:双指针优化:利用有序数组的单调性 版本1代码 提问:版本1代码有可以优化的空间吗? 版本2代码 提问:版本2代码有可以优化的空间吗? 版本3代码(★推荐★) 3.牛客网题目:和为s的数字 1.LeetCode题目 …...

编程日记 2026/1/19 6:26:18

英语学习4.9

cordial 形容词&#xff1a; 热情友好的&#xff0c;诚恳的 表示一个人态度温和、亲切&#xff0c;给人温暖和善的感觉。 令人愉快的&#xff0c;和睦的 形容关系融洽、氛围和谐。 例句​​&#xff1a; The two leaders had a ​​cordial​​ but formal discussion. &am…...

编程日记 2026/1/19 5:11:46