1.

先上图这是首页上代码：index.php

!DOCTYPEhtmlhtmlheadmetacharset"utf-8"metaname"viewport"content"widthdevice-width,initial-scale1.0"metahttp-equiv"X-UA-Compatible"content"IEedge"linkrel"stylesheet"type"text/css"href"font_Icon/iconfont.css"linkrel"stylesheet"type"text/css"href"css/chat.css"/headbodystyle"text-align:center"divclass"chatContainer"divclass"qqcss"atarget"_blank"href"http://wpa.qq.com/msgrd?v3uin1341483593siteqqmenuyes"imgborder"0"src"http://wpa.qq.com/pa?p2:1341483593:53"alt"小程序"title"点击这里给我发消息"//aiclass"iconfonticon-xiaoxi1"/i/divdivclass"chatBtn"iclass"iconfonticon-xiaoxi1"/i/divdivclass"chat-message-num"/divdivclass"chatBox"ref"chatBox"divclass"chatBox-head"divclass"chatBox-head-one"有券商城在线客服divclass"chat-close"style"margin:10px10px00;font-size:14px"关闭/div/divdivclass"chatBox-head-two"divclass"chat-return"返回/divdivclass"chat-people"divclass"ChatInfoHead"img src""alt"小程序"//divdivclass"ChatInfoName"这是用户的名字，看看名字到底能有多长/div/divdivclass"chat-close"关闭/div/div/divdivclass"chatBox-info"divclass"chatBox-list"ref"chatBoxlist"divclass"chat-list-people"divimg src"img/icon01.png"alt"小程序"//divdivclass"chat-name"p客服/p/divdivclass"message-num"咨询/div/div!--divclass"chat-list-people"--!--divimg src"img/icon02.png"alt"小程序"//div--!--divclass"chat-name"--!--p客服2/p--!--/div--!--divclass"message-num"1/div--!--/div--!--divclass"chat-list-people"--!--divimg src"img/icon03.png"alt"小程序"//div--!--divclass"chat-name"--!--p客服3/p--!--/div--!--divclass"message-num"2/div--!--/div--/divdivclass"chatBox-kuang"ref"chatBoxkuang"divclass"chatBox-content"divclass"chatBox-content-demo"id"chatBox-content-demo"divclass"clearfloat"divclass"author-name"smallclass"chat-date"id"systime"2019-5-2419:24:35/small/divdivclass"left"divclass"chat-avatars"img src"img/icon01.png"alt"小程序"//divdivclass"chat-message"你好！请问有什么可以帮到您的吗？/div/div/div!--divclass"clearfloat"--!--divclass"author-name"--!--smallclass"chat-date"2017-12-0214:26:58/small--!--/div--!--divclass"left"--!--divclass"chat-avatars"img src"img/icon01.png"alt"小程序"//div--!--divclass"chat-message"--!--img src"img/1.png"alt"小程序"--!--/div--!--/div--!--/div--!--divclass"clearfloat"--!--divclass"author-name"--!--smallclass"chat-date"2017-12-0214:26:58/small--!--/div--!--divclass"right"--!--divclass"chat-message"嗯，适合做壁纸/div--!--divclass"chat-avatars"img src"img/icon02.png"alt"小程序"//div--!--/div--!--/div--/div/divdivclass"chatBox-send"divclass"div-textarea"/divdivbuttonid"chat-biaoqing"class"btn-default-styles"iclass"iconfonticon-biaoqing"/i/buttonlabelid"chat-tuxiang"title"发送图片"for"inputImage"class"btn-default-styles"inputtype"file""selectImg(this)"accept"image/jpg,image/jpeg,image/png"name"file"id"inputImage"class"hidden"iclass"iconfonticon-tuxiang"/i/labelbuttonid"chat-fasong"class"btn-default-styles"iclass"iconfonticon-fasong"/i/button/divdivclass"biaoqing-photo"ullispanclass"emoji-picker-image"style"background-position:-9px-18px;"/span/lilispanclass"emoji-picker-image"style"background-position:-40px-18px;"/span/lilispanclass"emoji-picker-image"style"background-position:-71px-18px;"/span/lilispanclass"emoji-picker-image"style"background-position:-102px-18px;"/span/lilispanclass"emoji-picker-image"style"background-position:-133px-18px;"/span/lilispanclass"emoji-picker-image"style"background-position:-164px-18px;"/span/lilispanclass"emoji-picker-image"style"background-position:-9px-52px;"/span/lilispanclass"emoji-picker-image"style"background-position:-40px-52px;"/span/lilispanclass"emoji-picker-image"style"background-position:-71px-52px;"/span/lilispanclass"emoji-picker-image"style"background-position:-102px-52px;"/span/lilispanclass"emoji-picker-image"style"background-position:-133px-52px;"/span/lilispanclass"emoji-picker-image"style"background-position:-164px-52px;"/span/lilispanclass"emoji-picker-image"style"background-position:-9px-86px;"/span/lilispanclass"emoji-picker-image"style"background-position:-40px-86px;"/span/lilispanclass"emoji-picker-image"style"background-position:-71px-86px;"/span/lilispanclass"emoji-picker-image"style"background-position:-102px-86px;"/span/lilispanclass"emoji-picker-image"style"background-position:-133px-86px;"/span/lilispanclass"emoji-picker-image"style"background-position:-164px-86px;"/span/lilispanclass"emoji-picker-image"style"background-position:-9px-120px;"/span/lilispanclass"emoji-picker-image"style"background-position:-40px-120px;"/span/lilispanclass"emoji-picker-image"style"background-position:-71px-120px;"/span/lilispanclass"emoji-picker-image"style"background-position:-102px-120px;"/span/lilispanclass"emoji-picker-image"style"background-position:-133px-120px;"/span/lilispanclass"emoji-picker-image"style"background-position:-164px-120px;"/span/lilispanclass"emoji-picker-image"style"background-position:-9px-154px;"/span/lilispanclass"emoji-picker-image"style"background-position:-40px-154px;"/span/lilispanclass"emoji-picker-image"style"background-position:-71px-154px;"/span/lilispanclass"emoji-picker-image"style"background-position:-102px-154px;"/span/lilispanclass"emoji-picker-image"style"background-position:-133px-154px;"/span/lilispanclass"emoji-picker-image"style"background-position:-164px-154px;"/span/li/ul/div/div/div/div/div/divscriptsrc"http://www.jq22.com/jquery/jquery-1.10.2.js"/scriptscriptfunctiontimenow(){varmyDatenewDate();vartimesmyDate.toLocaleString();returntimes}document.getElementById('systime').innerHTMLtimenow();screenFuc();functionscreenFuc(){vartopHeight$(".chatBox-head").innerHeight();//聊天头部高度//屏幕小于768px时候,布局changevarwinWidth$(window).innerWidth();if(winWidth768){vartotalHeight$(window).height();//页面整体高度$(".chatBox-info").css("height",totalHeight-topHeight);varinfoHeight$(".chatBox-info").innerHeight();//聊天头部以下高度//中间内容高度$(".chatBox-content").css("height",infoHeight-46);$(".chatBox-content-demo").css("height",infoHeight-46);$(".chatBox-list").css("height",totalHeight-topHeight);$(".chatBox-kuang").css("height",totalHeight-topHeight);$(".div-textarea").css("width",winWidth-106);}else{$(".chatBox-info").css("height",495);$(".chatBox-content").css("height",448);$(".chatBox-content-demo").css("height",448);$(".chatBox-list").css("height",495);$(".chatBox-kuang").css("height",495);$(".div-textarea").css("width",260);}}(window.onresizefunction(){screenFuc();})();//未读信息数量为空时vartotalNum$(".chat-message-num").html();if(totalNum""){$(".chat-message-num").css("padding",0);}$(".message-num").each(function(){varwdNum$(this).html();if(wdNum""){$(this).css("padding",0);}});//打开/关闭聊天框$(".chatBtn").click(function(){$(".chatBox").toggle(10);})$(".chat-close").click(function(){$(".chatBox").toggle(10);})//进聊天页面$(".chat-list-people").each(function(){$(this).click(function(){varn$(this).index();$(".chatBox-head-one").toggle();$(".chatBox-head-two").toggle();$(".chatBox-list").fadeToggle();$(".chatBox-kuang").fadeToggle();//传名字$(".ChatInfoName").text($(this).children(".chat-name").children("p").eq(0).html());//传头像$(".ChatInfoHeadimg").attr("src",$(this).children().eq(0).children("img").attr("src"));//聊天框默认最底部$(document).ready(function(){$("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);});})});//返回列表$(".chat-return").click(function(){$(".chatBox-head-one").toggle(1);$(".chatBox-head-two").toggle(1);$(".chatBox-list").fadeToggle(1);$(".chatBox-kuang").fadeToggle(1);});//发送信息$("#chat-fasong").click(function(){vartextContent$(".div-textarea").html().replace(/[r]/g,'br')if(textContent!""){$(".chatBox-content-demo").append("divclass"clearfloat""+"divclass"author-name"smallclass"chat-date"id"timenow"/small/div"+"divclass"right"divclass"chat-message""+textContent+"/div"+"divclass"chat-avatars"img src"img/icon01.png"alt"头像"//div/div/div");//发送后清空输入框$(".div-textarea").html("");//聊天框默认最底部$(document).ready(function(){$("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);});document.getElementById('timenow').innerHTMLtimenow();if(textContent.indexOf("主营类目")!"-1"){varre"若您店铺已经缴纳了店铺保证金并且没有上架过任何商品、无任何上下架记录，可以进行主营类目修改，请联系客服申请修改类目。";reply(re);}elseif(textContent.indexOf("上首页")!"-1"){varre"入驻成功后您可以在管理后台-店铺营销-首页竞价活动中参与。";reply(re);}elseif(textContent.indexOf("怎么入驻")!"-1"){varre"进入有券官网，点击【商家加盟】-自主注册入驻，具体流程为：一、选择店铺类型；二、填写并提交相关资质、店铺名(入驻成功后店铺名不能修改)、店铺LOGO、店铺详情等信息；三、等待有券平台审核；四、平台审核通过后签约；五、上架商品。";reply(re);}elseif(textContent.indexOf("商家运营")!"-1"){varre"您可以点击联系客服，联系客服对接，登记填写“商家数据库”链接，运营会挖掘其中的优质商家进行对接。";reply(re);}else{varre"请输入正确的关键字：br1.怎么入驻br2.主营类目可以修改吗br3.怎么上首页br4.怎么找商家运营";reply(re);}}});//发送表情$("#chat-biaoqing").click(function(){$(".biaoqing-photo").toggle();});$(document).click(function(){$(".biaoqing-photo").css("display","none");});$("#chat-biaoqing").click(function(event){event.stopPropagation();//阻止事件});$(".emoji-picker-image").each(function(){$(this).click(function(){varbq$(this).parent().html();console.log(bq)$(".chatBox-content-demo").append("divclass"clearfloat""+"divclass"author-name"smallclass"chat-date"id"timenow"/small/div"+"divclass"right"divclass"chat-message""+bq+"/div"+"divclass"chat-avatars"img src"img/icon01.png"alt"头像"//div/div/div");//发送后关闭表情框$(".biaoqing-photo").toggle();//聊天框默认最底部$(document).ready(function(){$("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);});document.getElementById('timenow').innerHTMLtimenow();})});//自动回复functionreply(textContent){if(textContent!""){$(".chatBox-content-demo").append("divclass"clearfloat""+"divclass"author-name"smallclass"chat-date"id"timenow"/small/div"+"divclass"left"divclass"chat-avatars"img src"img/icon01.png"alt"头像"//div"+"divclass"chat-message""+textContent+"/div/div/div");//发送后清空输入框//$(".div-textarea").html("");//聊天框默认最底部$(document).ready(function(){$("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);});document.getElementById('timenow').innerHTMLtimenow();}}//发送图片functionselectImg(pic){if(!pic.files||!pic.files[0]){return;}varreadernewFileReader();reader.onloadfunction(evt){varimagesevt.target.result;$(".chatBox-content-demo").append("divclass"clearfloat""+"divclass"author-name"smallclass"chat-date"id"timenow"/small/div"+"divclass"right"divclass"chat-message"img src"+images+"/div"+"divclass"chat-avatars"img src"img/icon01.png"alt"头像"//div/div/div");//聊天框默认最底部$(document).ready(function(){$("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);});document.getElementById('timenow').innerHTMLtimenow();};reader.readAsDataURL(pic.files[0]);}/script/body/html2.

全部源代码放在百度网盘提供大家学习参考：链接：https://pan.baidu.com/s/1kMzgzjLiTfEeUKgpTFR7pg提取码：zb09这是我参考技术大牛修改过来的，如侵权请联系我