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 23 Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
Apr 07 Javascript
使用jquery制作弹出框效果
Apr 03 Javascript
jQuery实现的背景动态变化导航菜单效果
Aug 24 Javascript
javascript+css3 实现动态按钮菜单特效
Feb 06 Javascript
JS中的phototype详解
Feb 04 Javascript
javascript深拷贝和浅拷贝详解
Feb 14 Javascript
node通过express搭建自己的服务器
Sep 30 Javascript
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
React Native中NavigatorIOS组件的简单使用详解
Jan 27 Javascript
对vue 键盘回车事件的实例讲解
Aug 25 Javascript
微信小程序实现折线图的示例代码
Jun 07 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
用Json实现PHP与JavaScript间数据交换的方法详解
2013/06/20 PHP
php无限遍历文件夹示例分享
2014/03/04 PHP
ThinkPHP3.1基础知识快速入门
2014/06/19 PHP
thinkphp实现分页显示功能
2016/12/03 PHP
PHP实现生成数据字典功能示例
2018/05/24 PHP
javascript编程起步(第四课)
2007/01/10 Javascript
checkbox 多选框 联动实现代码
2008/10/22 Javascript
页面装载js及性能分析方法介绍
2014/03/21 Javascript
Python脚本后台运行的几种方式
2015/03/09 Javascript
Node.js中的流(Stream)介绍
2015/03/30 Javascript
浅析jQuery Mobile的初始化事件
2015/12/03 Javascript
Select下拉框模糊查询功能实现代码
2016/07/22 Javascript
移动端点击态处理的三种实现方式
2017/01/12 Javascript
基于JS实现翻书效果的页面切换样式
2017/02/16 Javascript
探究react-native 源码的图片缓存问题
2017/08/24 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
2018/01/24 Javascript
fetch 如何实现请求数据
2018/12/20 Javascript
Layui table field初始化加载时进行隐藏的方法
2019/09/19 Javascript
python 简易计算器程序,代码就几行
2009/08/29 Python
python列表的常用操作方法小结
2016/05/21 Python
PyTorch读取Cifar数据集并显示图片的实例讲解
2018/07/27 Python
Python使用一行代码获取上个月是几月
2018/08/30 Python
python3实现多线程聊天室
2018/12/12 Python
在windows下使用python进行串口通讯的方法
2019/07/02 Python
Python实现简单的列表冒泡排序和反转列表操作示例
2019/07/10 Python
Python之time模块的时间戳,时间字符串格式化与转换方法(13位时间戳)
2019/08/12 Python
Tensorflow训练模型越来越慢的2种解决方案
2020/02/07 Python
django 模型中的计算字段实例
2020/05/19 Python
浅析python 通⽤爬⾍和聚焦爬⾍
2020/09/28 Python
python如何快速拼接字符串
2020/10/28 Python
使用phonegap创建联系人的实现方法
2017/03/30 HTML / CSS
购买澳大利亚最好的服装和内衣在线:BONDS
2016/10/14 全球购物
美国名牌香水折扣网站:Hottperfume
2021/02/10 全球购物
销售会计岗位职责
2014/03/15 职场文书
查摆问题对照检查材料
2014/08/28 职场文书
2015年度个人思想工作总结
2015/04/08 职场文书