JavaScript仿聊天室聊天记录


Posted in Javascript onDecember 27, 2016

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

参考样式(css自定义聊天窗口样式):http://xiazai.3water.com/201612/yuanma/css3chatstyle(3water.com).rar

功能描述:

1. 用户在微信公众号里发送内容,参与活动
2. 后台提供类似聊天室的窗口显示用户实时发布的内容

界面截图:

JavaScript仿聊天室聊天记录

代码:

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弹出层插件简化版代码下载
Oct 16 Javascript
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
Sep 19 Javascript
jquery制作弹窗提示窗口代码分享
Mar 02 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
Nov 17 Javascript
js实现每日自动换一张图片的方法
May 04 Javascript
使用Raygun对Node.js应用进行错误处理的方法
Jun 23 Javascript
浅谈javascript中return语句
Jul 15 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
Sep 01 Javascript
JS使用插件cryptojs进行加密解密数据实例
May 11 Javascript
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
webpack 静态资源集中输出的方法示例
Nov 09 Javascript
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
基于jQuery实现顶部导航栏功能
Dec 27 #Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
Dec 27 #Javascript
基于jQuery实现左侧菜单栏可折叠功能
Dec 27 #Javascript
JS正则表达式修饰符global(/g)用法分析
Dec 27 #Javascript
js点击任意区域弹出层消失实现代码
Dec 27 #Javascript
JS正则表达式修饰符中multiline(/m)用法分析
Dec 27 #Javascript
jQuery Validate插件自定义验证规则的方法
Dec 27 #Javascript
You might like
咖啡知识 咖啡养豆要养多久 排气又是什么
2021/03/06 新手入门
原生PHP实现导出csv格式Excel文件的方法示例【附源码下载】
2019/03/07 PHP
jquery.validate使用攻略 第五步 正则验证
2010/07/01 Javascript
js URL参数的拼接方法比较
2012/02/15 Javascript
javascript dom追加内容实现示例
2013/09/21 Javascript
js实现div弹出层的方法
2014/11/20 Javascript
javascript中eval和with用法实例总结
2015/11/30 Javascript
JavaScript动态创建form表单并提交的实现方法
2015/12/10 Javascript
JS制作图形验证码实现代码
2020/10/19 Javascript
JS键盘版计算器的制作方法
2016/12/03 Javascript
基本DOM节点操作
2017/01/17 Javascript
ie下js不执行的几种可能
2017/02/28 Javascript
作为老司机使用 React 总结的 11 个经验教训
2017/04/08 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
2018/01/22 Javascript
Vue2.0中集成UEditor富文本编辑器的方法
2018/03/03 Javascript
使用layer.msg 时间设置不起作用的解决方法
2019/09/12 Javascript
js实现随机div颜色位置 类似满天星效果
2019/10/24 Javascript
python条件和循环的使用方法
2013/11/01 Python
python定时检查某个进程是否已经关闭的方法
2015/05/20 Python
python with提前退出遇到的坑与解决方案
2018/01/05 Python
小白如何入门Python? 制作一个网站为例
2018/03/06 Python
django-filter和普通查询的例子
2019/08/12 Python
Django 删除upload_to文件的步骤
2020/03/30 Python
基于python计算并显示日间、星期客流高峰
2020/05/07 Python
美国Lolё官网:购买大胆而美丽的女性运动服装
2017/05/22 全球购物
达拉斯牛仔官方商店:Dallas Cowboys Pro Shop
2018/02/10 全球购物
Lookfantastic俄罗斯:欧洲在线化妆品零售商
2019/08/06 全球购物
初中班主任评语
2014/04/24 职场文书
竞选大队长演讲稿
2014/04/29 职场文书
电气工程及其自动化专业毕业生自荐信
2014/06/21 职场文书
社区助残日活动总结
2014/08/29 职场文书
2014年人事专员工作总结
2014/11/19 职场文书
辞职信如何写
2015/02/27 职场文书
高三数学复习备考教学反思
2016/02/18 职场文书
公文写作指导之倡议书!
2019/07/03 职场文书
Python数据分析之pandas读取数据
2021/06/02 Python