JavaScript仿聊天室聊天记录

2019-11-19 18:14:17

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了js仿聊天室聊天记录的具体代码，供大家参考，具体内容如下

参考样式（css自定义聊天窗口样式）：http://xiazai.VeVB.COm/201612/yuanma/css3chatstyle(VeVB.COm).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 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;

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：javascript实现文字无缝滚动

下一篇：基于jQuery实现顶部导航栏功能