前端实现聊天对话框页⾯
HTML部分
<!dtype html>
<html>
<head>
<meta chart="utf-8">
<title>与客服1聊天中</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, ur-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-te
xt" 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-clo'>关闭</button>
</div>
</div>
<div class="chat-header">
<i id="btn_clo" class="chat-clo">></i>
glassy
<div class="chat-rvice-info">
<a class="chat-rvice-img"></a>
<div class="chat-rvice-title">
<p class="chat-rvice-name">客服1</p>
<p class="chat-rvice-detail">我是您的专属客服</p>
</div>
</div>
</div>
<div id="chat_contain" class="chat-contain">
<!-- <p class="chat-rvice-contain">
<span class="chat-text chat-rvice-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-rvice-simulator">模拟</button>
<button class="chat-clo-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(){
function openBody(){
$('.chat-support-btn').css({'display': 'none'});
$('.chat-main').css({'display': 'inline-block', 'height': '0'});
$('.chat-main').animate({'height': '600px'})
}
openBody();
// 模拟⼀些后端传输数据
var rviceData = {
'robot': {
'chat': ['Google⼀下吗？','这个⽹站您看⼀下', '稍等哦~','嘿嘿','百度⼀下？','嗯嗯嗯'], }
};
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'),
btnClo =d.querySelector('#btn_clo');
/*拖动*/
console.log("Firefox上此处不会执⾏，Chrome正常");
e.preventDefault();
};
function chatDrag(target){
election
{
e=e||window.event;
e.dataTransfer.clearData();
offtX= e.offtX;
offtY= e.offtY;
/*e.dataTransfer.tData("offtX",String(offtX));
e.dataTransfer.tData("offtY",String(offtY));
console.log(offtX+' ..'+offtY);
console.log(Data("offtX")+'..'+Data("offtY"));*/
}
{
e=e||window.event;
var x= e.pageX;
var y= e.pageY;
if(x==0 && y==0){
return; //不处理拖动最后⼀刻X和Y都为0的情形
}
x-=offtX;
y-=offtY;
/*x-=Number(Data("offtX"));
y-=Number(Data("offtY"));*/
target.style.left=x+'px';
p=y+'px';
}
}
chatDrag(chat_main);//拖动聊天窗⼝
chatDrag(btnOpen);//拖动头像⼩图标
/*头像信息*/
/*⿏标在头像上*/
$('.chat-rvice-img').mouenter(
function(){
headerInfoDiv.fadeIn(1000);
}
)
$('.chat-rvice-img').mouleave(
function(){
高铁英文headerInfoDiv.fadeOut();
}
)
/*关闭对话框*/
function cloChat(){
carrot的复数$('.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();
})
btnClo.addEventListener('click',cloChat)
/*创建新消息框*/
function createInfo(name,value)
{
var chatTime=new Date();
LocaleTimeString();
var nodeP = d.createElement('p'),
nodeSpan = d.createElement('span')
ateElement('p');
place(/(((ht|f)tps?):\/\/)?([A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*)/g,function(content){ return "<a href='"+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('rvice','您好'); /*发送第⼀句话*/
var timer,
timerId,
flagInput=fal;
关爱他人shiftDown = fal; // 判断是否按住shift键
schedule_workfunction chatHintNull(chatHint){//空输⼊提⽰
tTimeout(function(){
chatHint.fadeIn();
clearTimeout(timerId);
timer = tTimeout(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=fal;
return true;
}
el if(shiftDown==fal&&Input.value == '')
{
Hint();
return true;
}
el
{
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();
}
el
{
chatHintNull(chatHint);
}
});
/
*模拟后台消息*/
var chatSim=$('.chat-simulator'),
sim_Text=d.querySelector('.simulator-text');
simText=$('.simulator-text');
$('.chat-rvice-simulator').click(
function(){
chatSim.fadeIn(500);
simText.focus();
}
);
$('.simulator-submmit').click(function(){
dc motorif(simText.val()=='')
{
chatHintNull(chat_Hint);
}
el{
createInfo('rvice',simText.val());
simText.val('');
simText.focus();
}
});
/*模拟的输⼊框enter键判断*/
sim_Text.addEventListener('keydown', function(e) {
e = e||window.event;
isEnter(sim_Text,chatHintNull,'rvice',e);
})
$('.simulator-clo').click(function()
{
chatSim.fadeOut();
simText.val('');
simText.focus();
});
/*关闭按钮*/
$('.chat-clo-button').click(
function()
{
if (confirm("不再聊会⼉吗？")){
window.clo();
}
el{}
}
);
/*按钮特效*/
var buttons=$('button');
buttons.each(function(i)
{
$(this).mouenter(function(){
buttons.eq(i).fadeTo('slow',0.8);
});
}
)
buttons.each(function(i)
{
$(this).mouleave(function(){
buttons.eq(i).fadeTo('slow',1);
});
}
)
function submityouText(text) {
ally
// 模拟后端回复
var num = Math.random() * 10;
if (num <= 7) {
getServiceText(rviceData);
}
a href}
function getServiceText(data) {/*已定义后台消息框*/
var rviceText = bot.chat,
i = Math.floor(Math.random() * rviceText.length); createInfo('rvice',rviceText[i]);
}
</script>
</body>
</html>
css部分
@chart "utf-8";
