参考样式（css自定义聊天窗口样式）：(jb51.net).rar
功能描述：
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 content="keyword1,keyword2,keyword3"> <meta content="this is my page"> <meta content="text/html; charset=UTF-8"> <meta content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <script src="https://www.jb51.net/js/jquery-1.7.2.min.js"></script> <link href="https://www.jb51.net/css/style.css" media="screen" type="text/css" /> </head> <body > <div></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> <img alt="" src="'https://www.jb51.net/article/+img+'"></div>'+ '<div><span>'+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;