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;
}
3789
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
