摘要:<!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>