前端实现聊天对话框页面

HTML部分

<!dtype html>
<html>
<head>
<meta charset="utf-8">
<title>与客服1聊天中</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="chat.css">
<script src="jquery.js"></script>
</head>
<body>
<div class="chat-wrapper"><div id="btn_open" class="chat-support-btn" draggable="true"><!-- 聊天窗口缩小后的头像图标 --><img src='images/h.jpg'></img></div> <div class="chat-main" draggable="true"><div class='chat-simulator'><p id="chat_hint" class="chat-hint"><span class="chat-hint-icon">!</span><span class="chat-hint-text" style='color:black'>发送内容不能为空</span></p><textarea class='simulator-text' autofocus placeholder='请写下你希望我对你说的话,按enter键提交（shift+enter键换行）。'></textarea><div class='simulator-btn'><button class='simulator-submmit'>提交</button><button class='simulator-close'>关闭</button></div></div><div class="chat-header"><i id="btn_close" class="chat-close">></i><div class="chat-service-info"><a class="chat-service-img"></a><div class="chat-service-title"><p class="chat-service-name">客服1</p><p class="chat-service-detail">我是您的专属客服</p></div></div></div><div id="chat_contain" class="chat-contain"><!-- <p class="chat-service-contain"><span class="chat-text chat-service-text">您好</span></p> --></div><div class="chat-submit"><p id='chatHint' class="chat-hint"><span class="chat-hint-icon">!</span><span class="chat-hint-text">发送内容不能为空</span></p><textarea id="chat_input" class="chat-input-text" autofocus placeholder="请输入您想对我说的话，按Enter键发送（shift+Enter换行）。"></textarea><div class="chat-input-tools"><button class="chat-input-button">发送</button><button class="chat-service-simulator">模拟</button><button class="chat-close-button">关闭</button></div></div><div class="header-info-div"><h2 class="header-info-h2">客服1</h2><span class="header-info-span">我是您的专属客服</span></div></div>
</div>
<script>var d = document;/*显示对话窗口*/function openBody(){$('.chat-support-btn').css({'display': 'none'});$('.chat-main').css({'display': 'inline-block', 'height': '0'});$('.chat-main').animate({'height': '600px'})}openBody();// 模拟一些后端传输数据var serviceData = {'robot': {'chat': ['Google一下吗？www.google.com','这个网站您看一下www.baidu.com', '稍等哦~','嘿嘿','百度一下？www.baidu.com','嗯嗯嗯'],}};var chatMain=$('.chat-main'),chatHint = $('#chatHint'),chat_Hint = $('#chat_hint'),headerInfoDiv=$('.header-info-div');chat_main=d.querySelector('.chat-main');chatInput = d.querySelector('#chat_input'),chatContain = d.querySelector('#chat_contain'),btnOpen = d.querySelector('#btn_open'),btnClose =d.querySelector('#btn_close');/*拖动*/document.ondragover=function(e){console.log("Firefox上此处不会执行，Chrome正常");e.preventDefault();
};function chatDrag(target){target.ondragstart=function(e){e=e||window.event;e.dataTransfer.clearData();offsetX= e.offsetX;offsetY= e.offsetY;/*e.dataTransfer.setData("offsetX",String(offsetX));e.dataTransfer.setData("offsetY",String(offsetY));console.log(offsetX+' ..'+offsetY);console.log(e.dataTransfer.getData("offsetX")+'..'+e.dataTransfer.getData("offsetY"));*/}target.ondrag=function(e){ e=e||window.event;var x= e.pageX;var y= e.pageY;if(x==0 && y==0){return; //不处理拖动最后一刻X和Y都为0的情形}x-=offsetX;y-=offsetY;/*x-=Number(e.dataTransfer.getData("offsetX"));y-=Number(e.dataTransfer.getData("offsetY"));*/target.style.left=x+'px';target.style.top=y+'px';}}chatDrag(chat_main);//拖动聊天窗口chatDrag(btnOpen);//拖动头像小图标/*头像信息*//*鼠标在头像上*/$('.chat-service-img').mouseenter(function(){headerInfoDiv.fadeIn(1000);})$('.chat-service-img').mouseleave(function(){headerInfoDiv.fadeOut();})/*关闭对话框*/function closeChat(){$('.chat-main').animate({'height': '0'});$('.chat-main').css({'display': 'none'});$('.chat-support-btn').css({'display': 'inline-block'});}btnOpen.addEventListener('click', function(e) {/*点击头像打开聊天窗口*/e = e||window.event;openBody();}) btnClose.addEventListener('click',closeChat)/*创建新消息框*/function createInfo(name,value){var chatTime=new Date();chatTime=chatTime.toLocaleTimeString();var nodeP = d.createElement('p'),nodeSpan = d.createElement('span')nodeTime=d.createElement('p');value=value.replace(/(((ht|f)tps?):\/\/)?([A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*)/g,function(content){return "<a href='http://"+content+"' class='chat-address' target='view_window' style='color:#6666cc '>"+content+'</a>';;});   nodeP.classList.add('chat-'+name+'-contain');nodeSpan.classList.add('chat-'+name+'-text','chat-text');nodeTime.classList.add('chat-time');nodeSpan.innerHTML =value;nodeTime.innerHTML=chatTime;nodeP.appendChild(nodeTime);nodeP.appendChild(nodeSpan);chatContain.appendChild(nodeP);chatContain.scrollTop = chatContain.scrollHeight;}createInfo('service','您好'); /*发送第一句话*/   var timer,timerId,flagInput=false;shiftDown = false;  // 判断是否按住shift键function chatHintNull(chatHint){//空输入提示setTimeout(function(){chatHint.fadeIn();clearTimeout(timerId);timer = setTimeout(function() {chatHint.fadeOut();}, 1000);}, 10);timerId = timer;};/*监控是否按下enter*/function isEnter(Input,Hint,type,e){e = e||window.event;if (e.keyCode == 16) {//按住shift键shiftDown = true;}if(e.keyCode==13){if(shiftDown==true){ shiftDown=false; return true;}else if(shiftDown==false&&Input.value == ''){Hint();return true;}else {e.preventDefault();createInfo(type,Input.value);submityouText(Input.value);Input.value = null;Input.focus();}}}chatInput.addEventListener('keydown', function(e) {/*输入框按enter*/e = e||window.event;isEnter(chatInput,chatHintNull,'you',e);})/*为按钮绑定事件*/$('.chat-input-button').click(function(){/*消息框发送*/if(chatInput.value!=''){createInfo('you',chatInput.value);submityouText(chatInput.value);chatInput.value = null;chatInput.focus();}else{chatHintNull(chatHint);}});/*模拟后台消息*/var chatSim=$('.chat-simulator'),sim_Text=d.querySelector('.simulator-text');simText=$('.simulator-text');$('.chat-service-simulator').click(function(){chatSim.fadeIn(500);simText.focus();});$('.simulator-submmit').click(function(){if(simText.val()==''){chatHintNull(chat_Hint);}else{createInfo('service',simText.val());simText.val('');simText.focus();}});/*模拟的输入框enter键判断*/sim_Text.addEventListener('keydown', function(e) {e = e||window.event;isEnter(sim_Text,chatHintNull,'service',e);})$('.simulator-close').click(function(){chatSim.fadeOut();simText.val('');simText.focus();});/*关闭按钮*/$('.chat-close-button').click(function(){if (confirm("不再聊会儿吗？")){window.close();}else{}});/*按钮特效*/var buttons=$('button');buttons.each(function(i){$(this).mouseenter(function(){buttons.eq(i).fadeTo('slow',0.8);});})buttons.each(function(i){$(this).mouseleave(function(){buttons.eq(i).fadeTo('slow',1);});})function submityouText(text) {// 模拟后端回复var num = Math.random() * 10;if (num <= 7) {getServiceText(serviceData);}}function getServiceText(data) {/*已定义后台消息框*/var serviceText = data.robot.chat,i = Math.floor(Math.random() * serviceText.length);createInfo('service',serviceText[i]);}</script>
</body>
</html>

css部分

@charset "utf-8";
/*公共样式*/
html{font-family:"Helvetica Neue",Helvetica,STHeiTi,sans-serif;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;}
body{-webkit-overflow-scrolling:touch;margin:0;}
ul{margin:0;padding:0;list-style:none;outline:none;}
dl,dd{margin:0;}
a{display:inline-block;margin:0;padding:0;text-decoration:none;background:transparent;outline:none;color:#000;}
a:link,a:visited,a:hover,a:active{text-decoration:none;color:currentColor;}
a,dt,dd{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;}
img{border:0;}
p{margin:0;}
input,button,select,textarea{margin:0;padding:0;border:0;outline:0;background-color:transparent;}
button:hover{cursor:pointer;
}
/*css reset*/
body {position: relative;
}.chat-wrapper {font-size: 14px;color: #fff;
}
/*右侧按钮*/.chat-support-btn {position: fixed;display: inline-block;top: 50%;right: 0;margin-top: -70px;width: 40px;height: 40px;cursor:pointer;}
.chat-support-btn img{position:absolute;border-radius:50%;
}
/* 对话框*/
.chat-main {position: fixed;display: none;right: 100px;bottom: 10px;width: 650px;height: 800px;border-radius: 4px; box-shadow: 0 0 5px rgba(0, 0, 0, .4);
} /*对话框头部*/
.chat-header {position: relative;padding: 10px;height: 80px;border-top-left-radius: 4px;border-top-right-radius: 4px;box-shadow: 0 0 5px rgba(0, 0, 0, .2);background-color: #cc3333;
}
.chat-header a:hover{cursor:pointer;
}
/*个人信息框*/
.header-info-div{display:none;width:290px;height:150px;margin:-600px 0 0 -300px;border-radius:4px;background-image:url("images/bg.jpeg");
}
.header-info-h2{display:inline-block;margin:15px 0 0 25px;
}
.header-info-span{position:absolute;top:45px;left:-276px;
}
.chat-close {position: absolute;top: 10px;right: 20px;padding: 2px;font-size: 22px;transform: rotate(90deg);cursor: pointer;
}.chat-service-info {position: relative;top: 50%;margin-top: -20px; height: 40px;
}.chat-service-img {display: inline-block;margin: 0 10px 0 20px;width: 40px;height: 40px;text-align: center;line-height: 40px;vertical-align: middle;color: #000;border-radius: 50%;box-shadow: 1px 1px 4px rgba(0, 0, 0, .2);background-image: url("images/h.jpg");
}.chat-service-title {display: inline-block;vertical-align: middle;
}.chat-service-detail {font-size: 12px;
}/*对话框内容*/
.chat-contain {overflow-y: auto;padding: 10px;height: 380px;word-wrap: break-word;background-color: #f9f9f9;
}.chat-text {display: inline-block;position: relative;padding: 10px;max-width: 120px;color:black;white-space: pre-wrap;border: 1px solid #ffff7d;border-radius: 4px;background-color: #ffff7d;box-sizing: border-box;}
.chat-time{color:#939393;font-size:12px;
}
.chat-service-contain {margin-bottom: 10px;text-align: left;
}
.chat-service-contain .chat-time{margin:0 0 0 37px;
}
.chat-address{display:inline-block;max-width:100px;white-space:pre-wrap;
}
.chat-service-text {margin-left:40px;
}
.chat-service-text:before {content: '';position: absolute;top: 50%;left:-48px;width:35px;height:36px;border:1px solid transparent;background-image:url('images/hs.jpg');border-radius:50%;-webkit-transform: translate(0, -50%);transform: translate(0, -50%);
}
.chat-you-contain {margin-bottom: 10px;text-align: right;/* float:right; */
}
.chat-you-contain .chat-time{margin:0 20px 0 0;
}
.chat-you-text {margin-right: 20px;text-align:left;
}.chat-you-text:after {content: '';position: absolute;top: 50%;right: -10px;width: 0;height: 0;border-top: 6px solid transparent;border-bottom: 6px solid transparent;border-left: 10px solid #ffff7d;-webkit-transform: translate(0, -50%);transform: translate(0, -50%);
}
/*客服对话框底部与输入*/
.chat-submit {position: relative;padding: 10px;height: 100px;color: #000;word-wrap: break-word;border-top: 1px solid #ddd;box-sizing: border-box;
}/*空输入提示*/
.chat-hint {display:none;position:absolute;top: -15px;left: 20px;padding: 2px;width: 140px;height: 18px;font-size: 12px;text-align: center;line-height: 18px;border: 1px solid #ddd;box-shadow: 1px 1px 4px rgba(0, 0, 0, .4);background-color: #fff;
}.chat-hint-icon {display: inline-block;width: 18px;height: 18px;margin-right: 5px;font-size: 14px;font-style: italic;font-weight: 700;vertical-align: middle;line-height: 18px;color: #fff;border-radius: 50%;background-color: #5d94f3
}.chat-hint-text {display: inline-block;vertical-align: middle;
}/*输入框*/
.chat-input-text {overflow-y: auto;display: inline-block;padding: 5px 10px;width: 100%;height: 70px;vertical-align: middle;white-space: pre-wrap;word-wrap: break-word;resize: none;box-sizing: border-box;
}.chat-input-tools {position:absolute;width: 100%;height:30px;margin:-25px 0 0 400px;vertical-align: middle;
}
button{width:62px;height:28px;border-radius:4px;background-color: #cc3333;margin:5px 0;
}
.chat-input-tools>button:hover{cursor:pointer;
}
.simulator-text{display: inline-block;width:200px;height:260px;overflow-y: auto;padding: 10px 10px;vertical-align: middle;color: #000;white-space: pre-wrap;word-wrap: break-word;resize: none;box-sizing: border-box;}
.chat-simulator{display:none;position:absolute;left:-230px;top:200px;width:200px;height:300px;border:1px solid  #cc3333;border-radius:4px;background-color: #f9f9f9;box-shadow: 0 0 5px rgba(0, 0, 0, .4);
}
.simulator-btn{float:right;padding:0 10px;
}

前端实现聊天对话框页面相关推荐

轻松实现网页中通过链接跳转到QQ聊天界面，通过链接加QQ群，自动打开聊天对话框等等，包含电脑版和手机版的实现，示例部分Android和iOS的代码
通过链接打开对话框: 打开qq聊天窗口的方法 <a href="http://wpa.qq.com/msgrd?v=3&uin=1450612626&site=qq&a ...
使用WebRTC搭建前端视频聊天室——点对点通信篇
转载自:使用WebRTC搭建前端视频聊天室--点对点通信篇 WebRTC给我们带来了浏览器中的视频.音频聊天体验.但个人认为,它最实用的特性莫过于DataChannel--在浏览器之间建立一个点对点的 ...
互联网晚报 | 8月16日 | iPhone14或仍有刘海；百度回应前腾讯新闻负责人王诗沐是否加入；微信聊天对话框支持放大编辑...
iPhone14或仍有刘海,设计.芯片都不变 MacRumors总结了苹果发布会爆料信息.其中,iPhone14可能更像是"iPhone 13S",因为预计它不会有很多变化,将会带 ...
使用WebRTC搭建前端视频聊天室——入门篇
转载自:使用WebRTC搭建前端视频聊天室--入门篇什么是WebRTC? 众所周知,浏览器本身不支持相互之间直接建立信道进行通信,都是通过服务器进行中转.比如现在有两个客户端,甲和乙,他们俩想要通信 ...
iPhone14或仍有刘海，设计、芯片都不变；微信聊天对话框支持放大编辑；Android 13正式版发布|极客头条...
「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「极客头条」来啦,快来看今天都有哪些值得我们技术人关注的重要新闻吧. 整理 | 梦依丹出品 | CSDN(ID:CSDNnews ...
使用WebRTC搭建前端视频聊天室——信令篇
转载自:使用WebRTC搭建前端视频聊天室--信令篇建议看这篇之前先看一下使用WebRTC搭建前端视频聊天室--入门篇如果需要搭建实例的话可以参照SkyRTC-demo:github地址其中使用 ...
iPhone14或仍有刘海，设计、芯片都不变；微信聊天对话框支持放大编辑；Android 13正式版发布|极客头条
「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「极客头条」来啦,快来看今天都有哪些值得我们技术人关注的重要新闻吧. 整理 | 梦依丹出品 | CSDN(ID:CSDNnews ...
前端 - 博客系统(页面设计) - JavaEE初阶 - 细节狂魔
文章目录前言博客系统博客列表页紧急修改一下背景图片,虽然上面那张图很美,但是小了.特别的模糊,我就在替换一下背景图 html 代码部分通用 css 代码部分博客列表页专属 css文件博客 ...
使用WebRTC搭建前端视频聊天室——数据通道篇
转自使用WebRTC搭建前端视频聊天室--数据通道篇在两个浏览器中,为聊天.游戏.或是文件传输等需求发送信息是十分复杂的.通常情况下,我们需要建立一台服务器来转发数据,当然规模比较大的情况下,会扩 ...

前端实现聊天对话框页面

前端实现聊天对话框页面相关推荐

最新文章

热门文章