伪聊天室实现记录

来源：互联网发布：用友软件主要客户编辑：程序博客网时间：2024/05/01 10:31

参考样式（css自定义聊天窗口样式）：http://www.downyi.com/downinfo/33029.html

功能描述：

1. 用户在微信公众号里发送内容，参与活动

2. 后台提供类似聊天室的窗口显示用户实时发布的内容

界面截图：

代码：

body {  padding: 0;  margin: 0;  background: -moz-linear-gradient(-45deg, #183850 0, #183850 25%, #192c46 50%, #22254c 75%, #22254c 100%);  background: -webkit-linear-gradient(-45deg, #183850 0, #183850 25%, #192c46 50%, #22254c 75%, #22254c 100%);  background-repeat: no-repeat;  background-attachment: fixed;}::-webkit-scrollbar {  width: 10px;}::-webkit-scrollbar-track {  border-radius: 10px;  background-color: rgba(25, 147, 147, 0.1);}::-webkit-scrollbar-thumb {  border-radius: 10px;  background-color: rgba(25, 147, 147, 0.2);}.chat-thread {  margin: 24px auto 0 auto;  padding: 0 20px 0 0;  list-style: none;  overflow-y: scroll;  overflow-x: hidden;}.chat-thread .li {  position: relative;  clear: both;  display: inline-block;  padding: 16px 40px 16px 20px;  margin: 0 0 20px 0;  font: 16px/20px 'Noto Sans', sans-serif;  border-radius: 10px;  background-color: rgba(25, 147, 147, 0.2);}/* Chat - Avatar */.chat-thread .img {  width: 50px;  height: 50px;  border-radius: 50px;  content: '';  float:left;  }/* Chat - Speech Bubble Arrow */.chat-thread li:after {  position: absolute;  top: 15px;  content: '';  width: 0;  height: 0;  border-top: 15px solid rgba(25, 147, 147, 0.2);}.chat-thread li:nth-child(odd) {  animation: show-chat-odd 0.15s 1 ease-in;  -moz-animation: show-chat-odd 0.15s 1 ease-in;  -webkit-animation: show-chat-odd 0.15s 1 ease-in;  float: right;  margin-right: 80px;  color: #0AD5C1;}.chat-thread li:nth-child(odd):before {  right: -80px;}.chat-thread li:nth-child(odd):after {  border-right: 15px solid transparent;  right: -15px;}.chat-thread li:nth-child(even) {  animation: show-chat-even 0.15s 1 ease-in;  -moz-animation: show-chat-even 0.15s 1 ease-in;  -webkit-animation: show-chat-even 0.15s 1 ease-in;  float: left;  margin-left: 80px;  color: #0EC879;}.chat-thread li:nth-child(even):before {  left: -80px;}.chat-thread li:nth-child(even):after {  border-left: 15px solid transparent;  left: -15px;}.chat-window {  position: fixed;  bottom: 18px;}.chat-window-message {  width: 100%;  height: 48px;  font: 32px/48px 'Noto Sans', sans-serif;  background: none;  color: #0AD5C1;  border: 0;  border-bottom: 1px solid rgba(25, 147, 147, 0.2);  outline: none;}/* Small screens */@media all and (max-width: 767px) {  .chat-thread {    width: 90%;    height: 500px;  }  .chat-window {    left: 5%;    width: 90%;  }}/* Medium and large screens */@media all and (min-width: 768px) {  .chat-thread {    width: 70%;    height: 500px;  }  .chat-window {    left: 25%;    width: 50%;  }}@keyframes show-chat-even {  0% {    margin-left: -480px;  }  100% {    margin-left: 0;  }}@-moz-keyframes show-chat-even {  0% {    margin-left: -480px;  }  100% {    margin-left: 0;  }}@-webkit-keyframes show-chat-even {  0% {    margin-left: -480px;  }  100% {    margin-left: 0;  }}@keyframes show-chat-odd {  0% {    margin-right: -480px;  }  100% {    margin-right: 0;  }}@-moz-keyframes show-chat-odd {  0% {    margin-right: -480px;  }  100% {    margin-right: 0;  }}@-webkit-keyframes show-chat-odd {  0% {    margin-right: -480px;  }  100% {    margin-right: 0;  }}.credits{  text-align:center;  margin-top:35px;  color: rgba(255, 255, 255, 0.35);  font-family: 'Noto Sans', sans-serif;}.credits a{  text-decoration:none;  color: rgba(255, 255, 255, 0.35);}

<!DOCTYPE html><html>  <head>  <meta charset="UTF-8">    <title>红包详情</title>    <meta name="keywords" content="keyword1,keyword2,keyword3">    <meta name="description" content="this is my page">    <meta name="content-type" content="text/html; charset=UTF-8">    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />    <script src="../js/jquery-1.7.2.min.js"></script>    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />  </head>  <body >    <div id="convo" class="chat-thread"></div>  </body>  <script type="text/javascript">var maxId = 0;var ip = "http://...";var imgArr=new Array();var contentArr=new Array();var canAdd = false;function loadUser(){$.post("../servlet/luckDraw", // 访问后台查询数据  {type : "messageList",limit : 5,maxId : maxId,time : new Date()  },  function(data,status){    var jsonobj=eval('('+data+')');    if(jsonobj.code=="200"){    canAdd = false;     imgArr=new Array();    contentArr=new Array();    var jsonarr = jsonobj.list;var str = "";for(var i=0;i<jsonarr.length;i++){//console.log(time1);imgArr[i] = ip+jsonarr[i].headImg;contentArr[i] = jsonarr[i].content;maxId = jsonarr[i].id;}canAdd = true;}});}loadUser();//var t1 = window.setTimeout(time(1),1000);     var t1 = window.setInterval(time,3000); function time(){if(!canAdd) return;if(imgArr.length==0){loadUser();return;}var img = imgArr[0];var content = contentArr[0];imgArr.splice(0, 1);contentArr.splice(0, 1);$("#convo").append('<div>'+'<div style="width:60px;height:50px;float:left"><img alt="" height="50px" width="50px" class="img" src="'+img+'"></div>'+'<div style="width:90%;float:left;"><span class="li">'+content+'</span></div>'+'</div>');var e=document.getElementById("convo");//保持滚动条一直在最底部e.scrollTop=e.scrollHeight;}</script></html>

String sql = "SELECT c.*,u.nickName,u.headImg "+ "from wx_costomersendmessage c,bid_user u "+ "where c.openId=u.openId and c.id>"+maxId+" order by c.id Limit 0,"+limit;

0 0