把前面学到的知识综合起来完成在线客服聊天页面

原创 2018-12-07 12:30:49 168
摘要:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin: 0px;pa
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>

<style type="text/css">
*{margin: 0px;padding: 0px;font-size: 12px;}

.top{width: 100%;height: 60px;background-color: #5BA4ED;line-height: 60px;color: #fff;text-align: left;font-size: 20px;}
.top div{margin-left: 30px;font-size: 30px;}
/* 公告框*/
#bb{width: 700px;height: 100px;background-color: #fff;margin:10px auto;border-radius: 6px;border:1px solid #ccc;box-shadow:4px 4px 15px #393939;color: #ccc;float: right;left: 280px;position: absolute;z-index: 999;}
#bb div{margin: 15px 15px;}
/*聊天内容*/
.text{width: 900px;height:400px;margin: 0px auto;float:left;margin-left: 200px;border:1px solid #ccc;position: relative;}
.text div{width: 900px;height:300px;margin-top: 99px;}
.text span{color:red;font-weight: bold;}
.clear{clear: both;}
/*工具栏*/
.tool{width: 902px;height:30px;background-color: #5BA4ED;margin-left: 200px;border-left: 1px;border-right: 1px;}
.tool ul{text-decoration: none;line-height: 30px;margin-left:20px;}
.tool li{float:left;list-style: none;margin-left: 20px;display: block;color: #fff;}

/*输入框*/
.memo{margin-left: 200px;}
.memo button{width: 100px;height: 40px;}
.memo div{margin-left: 680px;}
</style>

<script type="text/javascript" src="jquery-3.3.1.js"></script>

<script type="text/javascript">
var str ="";
var m=0;
$("document").ready(function() {
$("#Notice").click(function(){
if(m){
$("#bb").css("display","block");
m=0;
}else{
$("#bb").css("display","none");
m=1;
}

})

$("#button").click(function(){
if($(".message").val()){
str += "<span>客户: </span>"
str += $(".message").val() + "<br>";
$("#chat").html(str);
$(".message").val("");
}else{
alert("无内容");
}

})

$("#cle").click(function(){
str ="";
$("#chat").html("");
$("#chat").val("");

})
})
</script>
</head>
<body>
<div><div>在线客服</div></div>
<div id="bb"><div>公告:如果座席员忙,<br>
您在较长时间内未能获得应答,<br>
您也可以通过电话和电子邮件与我们联系。
公司电话:xxxx-xxxxxxx <br>
业务顾问:xxxxxxxxxx(谢小姐)
<br></div></div>
<div><div id="chat" style="">欢迎光临!</div></div>

<div></div>

<div>
<ul>
<li><button id ="cle" >清屏</button></li>
<li><button id = "Notice">公告</button></li>
<li></li>
<li></li>
</ul></div>
<div><textarea style="height: 100px;width: 900px;resize: none;"></textarea>
<div><button id="button">发送</button>
<button>关闭</button></div>
</div>
<div></div>
</body>
</html>

20181207122918.png

发布手记

热门词条