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 toggle使用分析
Nov 16 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
Nov 04 Javascript
JS实现随机化快速排序的实例代码
Aug 01 Javascript
jQuery知识点整理
Jan 30 Javascript
实现JavaScript高性能的数据存储
Dec 11 Javascript
Vuex简单入门
Apr 19 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
Jan 18 Javascript
基于Vue+element-ui 的Table二次封装的实现
Jul 20 Javascript
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
JS实现可切换图片的幻灯切换效果示例
May 24 Javascript
Vue-CLI 项目在pycharm中配置方法
Aug 30 Javascript
vue实现表格过滤功能
Sep 27 Javascript
基于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
在任意字符集下正常显示网页的方法二(续)
2007/04/01 PHP
php minixml详解
2008/07/19 PHP
PHP 关于访问控制的和运算符优先级介绍
2013/07/08 PHP
Laravel 5.1 框架Blade模板引擎用法实例分析
2020/01/04 PHP
iframe 自适应高度[在IE6 IE7 FF下测试通过]
2009/04/13 Javascript
JavaScript中的稀疏数组与密集数组[译]
2012/09/17 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
2013/11/05 Javascript
Jquery实现鼠标移动放大图片功能实例
2015/03/25 Javascript
JavaScript中setMonth()方法的使用详解
2015/06/11 Javascript
BootStrap的Datepicker控件使用心得分享
2016/05/25 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
2016/05/31 Javascript
基于jQuery的ajax方法封装
2016/07/14 Javascript
浅谈jquery中使用canvas的问题
2016/10/10 Javascript
微信小程序 教程之注册程序
2016/10/17 Javascript
js初始化验证实例详解
2016/11/26 Javascript
原生js实现弹出层效果
2017/01/20 Javascript
jQuery实现右侧抽屉式在线客服功能
2017/12/25 jQuery
ES6与CommonJS中的模块处理的区别
2018/06/13 Javascript
JS中的函数与对象的创建方式
2019/05/12 Javascript
深入了解响应式React Native Echarts组件
2019/05/29 Javascript
pm2启动ssr失败的解决方法
2019/06/29 Javascript
原生js实现俄罗斯方块
2020/10/20 Javascript
[01:13]2015国际邀请赛线下观战现场
2015/08/08 DOTA
Django在Win7下的安装及创建项目hello word简明教程
2014/07/14 Python
python中threading超线程用法实例分析
2015/05/16 Python
Python实现简单截取中文字符串的方法
2015/06/15 Python
python实现多线程网页下载器
2018/04/15 Python
用Python一键搭建Http服务器的方法
2018/06/01 Python
python 给DataFrame增加index行名和columns列名的实现方法
2018/06/08 Python
python gdal安装与简单使用
2019/08/01 Python
Python tcp传输代码实例解析
2020/03/18 Python
日本最大的旅游网站:Rakuten Travel(乐天旅游)
2018/08/02 全球购物
Overload和Override的区别。Overloaded的方法是否可以改变返回值的类型
2013/10/30 面试题
事业单位分类改革实施方案
2014/03/21 职场文书
小学生节水倡议书
2015/04/29 职场文书
MySQL infobright的安装步骤
2021/04/07 MySQL