1500字范文 > html+js+php客服系统界面与自动回复

html+js+php客服系统界面与自动回复

时间：2022-04-22 01:36:24

先上图

这是首页

上代码：

index.php

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="IE=edge"><link rel="stylesheet" type="text/css" href="font_Icon/iconfont.css"><link rel="stylesheet" type="text/css" href="css/chat.css"></head><body style="text-align:center"><div class="chatContainer"><div class="qqcss"><a target="_blank" href="/msgrd?v=3&uin=1341483593&site=qq&menu=yes"><img border="0" src="/pa?p=2:1341483593:53" alt="点击这里给我发消息" title="点击这里给我发消息"/></a> <i class="iconfont icon-xiaoxi1"></i></div><div class="chatBtn"><i class="iconfont icon-xiaoxi1"></i></div><div class="chat-message-num"></div><div class="chatBox" ref="chatBox"><div class="chatBox-head"><div class="chatBox-head-one">有券商城在线客服<div class="chat-close" style="margin: 10px 10px 0 0;font-size: 14px">关闭</div></div><div class="chatBox-head-two"><div class="chat-return">返回</div><div class="chat-people"><div class="ChatInfoHead"><img src="" alt="头像"/></div><div class="ChatInfoName">这是用户的名字，看看名字到底能有多长</div></div><div class="chat-close">关闭</div></div></div><div class="chatBox-info"><div class="chatBox-list" ref="chatBoxlist"><div class="chat-list-people"><div><img src="img/icon01.png" alt="头像"/></div><div class="chat-name"><p>客服</p></div><div class="message-num">咨询</div></div></div><div class="chatBox-kuang" ref="chatBoxkuang"><div class="chatBox-content"><div class="chatBox-content-demo" id="chatBox-content-demo"><div class="clearfloat"><div class="author-name"><small class="chat-date" id="systime">-5-24 19:24:35</small></div><div class="left"><div class="chat-avatars"><img src="img/icon01.png" alt="头像"/></div><div class="chat-message">你好！请问有什么可以帮到您的吗？</div></div></div></div></div><div class="chatBox-send"><div class="div-textarea"></div><div><button id="chat-biaoqing" class="btn-default-styles"><i class="iconfont icon-biaoqing"></i></button><label id="chat-tuxiang" title="发送图片" for="inputImage" class="btn-default-styles"><input type="file" "selectImg(this)" accept="image/jpg,image/jpeg,image/png"name="file" id="inputImage" class="hidden"><i class="iconfont icon-tuxiang"></i></label><button id="chat-fasong" class="btn-default-styles"><i class="iconfont icon-fasong"></i></button></div><div class="biaoqing-photo"><ul><li><span class="emoji-picker-image" style="background-position: -9px -18px;"></span></li><li><span class="emoji-picker-image" style="background-position: -40px -18px;"></span></li><li><span class="emoji-picker-image" style="background-position: -71px -18px;"></span></li><li><span class="emoji-picker-image" style="background-position: -102px -18px;"></span></li><li><span class="emoji-picker-image" style="background-position: -133px -18px;"></span></li><li><span class="emoji-picker-image" style="background-position: -164px -18px;"></span></li><li><span class="emoji-picker-image" style="background-position: -9px -52px;"></span></li><li><span class="emoji-picker-image" style="background-position: -40px -52px;"></span></li><li><span class="emoji-picker-image" style="background-position: -71px -52px;"></span></li><li><span class="emoji-picker-image" style="background-position: -102px -52px;"></span></li><li><span class="emoji-picker-image" style="background-position: -133px -52px;"></span></li><li><span class="emoji-picker-image" style="background-position: -164px -52px;"></span></li><li><span class="emoji-picker-image" style="background-position: -9px -86px;"></span></li><li><span class="emoji-picker-image" style="background-position: -40px -86px;"></span></li><li><span class="emoji-picker-image" style="background-position: -71px -86px;"></span></li><li><span class="emoji-picker-image" style="background-position: -102px -86px;"></span></li><li><span class="emoji-picker-image" style="background-position: -133px -86px;"></span></li><li><span class="emoji-picker-image" style="background-position: -164px -86px;"></span></li><li><span class="emoji-picker-image" style="background-position: -9px -120px;"></span></li><li><span class="emoji-picker-image" style="background-position: -40px -120px;"></span></li><li><span class="emoji-picker-image" style="background-position: -71px -120px;"></span></li><li><span class="emoji-picker-image" style="background-position: -102px -120px;"></span></li><li><span class="emoji-picker-image" style="background-position: -133px -120px;"></span></li><li><span class="emoji-picker-image" style="background-position: -164px -120px;"></span></li><li><span class="emoji-picker-image" style="background-position: -9px -154px;"></span></li><li><span class="emoji-picker-image" style="background-position: -40px -154px;"></span></li><li><span class="emoji-picker-image" style="background-position: -71px -154px;"></span></li><li><span class="emoji-picker-image" style="background-position: -102px -154px;"></span></li><li><span class="emoji-picker-image" style="background-position: -133px -154px;"></span></li><li><span class="emoji-picker-image" style="background-position: -164px -154px;"></span></li></ul></div></div></div></div></div></div><script src="/jquery/jquery-1.10.2.js"></script><script>function timenow() {var myDate = new Date();var times = myDate.toLocaleString( );return times}document.getElementById('systime').innerHTML = timenow();screenFuc();function screenFuc() {var topHeight = $(".chatBox-head").innerHeight();//聊天头部高度//屏幕小于768px时候,布局changevar winWidth = $(window).innerWidth();if (winWidth <= 768) {var totalHeight = $(window).height(); //页面整体高度$(".chatBox-info").css("height", totalHeight - topHeight);var infoHeight = $(".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.onresize = function () {screenFuc();})();//未读信息数量为空时var totalNum = $(".chat-message-num").html();if (totalNum == "") {$(".chat-message-num").css("padding", 0);}$(".message-num").each(function () {var wdNum = $(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 () {var n = $(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());//传头像$(".ChatInfoHead>img").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 () {var textContent = $(".div-textarea").html().replace(/[\n\r]/g, '<br>')if (textContent != "") {$(".chatBox-content-demo").append("<div class=\"clearfloat\">" +"<div class=\"author-name\"><small class=\"chat-date\" id=\"timenow\"></small> </div> " +"<div class=\"right\"> <div class=\"chat-message\"> " + textContent + " </div> " +"<div class=\"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').innerHTML = timenow();if(textContent.indexOf("主营类目") != "-1"){var re = "若您店铺已经缴纳了店铺保证金并且没有上架过任何商品、无任何上下架记录，可以进行主营类目修改，请联系客服申请修改类目。";reply(re);}else if(textContent.indexOf("上首页") != "-1"){var re = "入驻成功后您可以在管理后台-店铺营销-首页竞价活动中参与。";reply(re);}else if(textContent.indexOf("怎么入驻") != "-1"){var re = "进入有券官网，点击【商家加盟】-自主注册入驻，具体流程为：一、选择店铺类型；二、填写并提交相关资质、店铺名 (入驻成功后店铺名不能修改)、店铺LOGO、店铺详情等信息；三、等待有券平台审核；四、平台审核通过后签约；五、上架商品。";reply(re);}else if(textContent.indexOf("商家运营") != "-1"){var re = "您可以点击联系客服，联系客服对接，登记填写“商家数据库”链接，运营会挖掘其中的优质商家进行对接。";reply(re);}else{var re = "请输入正确的关键字：<br> 1.怎么入驻<br> 2.主营类目可以修改吗 <br>3.怎么上首页<br> 4.怎么找商家运营";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 () {var bq = $(this).parent().html();console.log(bq)$(".chatBox-content-demo").append("<div class=\"clearfloat\">" +"<div class=\"author-name\"><small class=\"chat-date\" id=\"timenow\"></small> </div> " +"<div class=\"right\"> <div class=\"chat-message\"> " + bq + " </div> " +"<div class=\"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').innerHTML = timenow();})});//自动回复function reply(textContent) {if (textContent != "") {$(".chatBox-content-demo").append("<div class=\"clearfloat\">" +"<div class=\"author-name\"><small class=\"chat-date\" id=\"timenow\"></small> </div> " +"<div class=\"left\"><div class=\"chat-avatars\"><img src=\"img/icon01.png\" alt=\"头像\" /></div> " +"<div class=\"chat-message\"> " + textContent + " </div> </div> </div>");//发送后清空输入框// $(".div-textarea").html("");//聊天框默认最底部$(document).ready(function () {$("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);});document.getElementById('timenow').innerHTML = timenow();}}//发送图片function selectImg(pic) {if (!pic.files || !pic.files[0]) {return;}var reader = new FileReader();reader.onload = function (evt) {var images = evt.target.result;$(".chatBox-content-demo").append("<div class=\"clearfloat\">" +"<div class=\"author-name\"><small class=\"chat-date\" id=\"timenow\"></small> </div> " +"<div class=\"right\"> <div class=\"chat-message\"><img src=" + images + "></div> " +"<div class=\"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').innerHTML = timenow();};reader.readAsDataURL(pic.files[0]);}</script></body></html>

全部源代码放在百度网盘提供大家学习参考：

链接：/s/1kMzgzjLiTfEeUKgpTFR7pg

提取码：zb09

这是我参考技术大牛修改过来的，如侵权请联系我

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。