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 相关文章推荐
instanceof和typeof运算符的区别详解
Jan 06 Javascript
一个简单的jQuery计算器实现了连续计算功能
Jul 21 Javascript
JavaScript图片轮播代码分享
Jul 31 Javascript
JavaScript的函数式编程基础指南
Mar 19 Javascript
正则表达式,替换所有HTML标签的简单实例
Nov 28 Javascript
canvas的神奇用法
Feb 03 Javascript
Node.js中看JavaScript的引用
Apr 22 Javascript
node实现基于token的身份验证
Apr 09 Javascript
详解vue-element Tree树形控件填坑路
Mar 26 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
JS Generator 函数的含义与用法实例总结
Apr 08 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
php中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
php is_executable判断给定文件名是否可执行实例
2016/09/26 PHP
js基于qrcode.js生成二维码的方法【附demo插件源码下载】
2016/12/28 PHP
关于文本框的一些限制控制总结~~
2010/04/15 Javascript
JavaScript初学者应注意的七个细节详细介绍
2012/12/27 Javascript
JS的千分位算法实现思路
2013/07/31 Javascript
js判断字符长度及中英文数字等
2014/03/19 Javascript
Jquery选择器中使用变量实现动态选择例子
2014/07/25 Javascript
Javascript中的call()方法介绍
2015/03/15 Javascript
为什么JS中eval处理JSON数据要加括号
2015/04/13 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
2015/09/26 Javascript
AngularJS服务service用法总结
2016/12/13 Javascript
js放大镜放大购物图片效果
2017/01/18 Javascript
解决ie img标签内存泄漏的问题
2017/10/13 Javascript
详解Vue + Vuex 如何使用 vm.$nextTick
2017/11/20 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
2018/03/08 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
2018/05/17 Javascript
element-ui表格合并span-method的实现方法
2019/05/21 Javascript
微信小程序停止其他视频播放当前视频的实例代码
2019/12/25 Javascript
Vue中用JSON实现刷新界面不影响倒计时
2020/10/26 Javascript
[03:42]2014DOTA2西雅图国际邀请赛7月9日TOPPLAY
2014/07/09 DOTA
python中使用urllib2获取http请求状态码的代码例子
2014/07/07 Python
Python实现字典依据value排序
2016/02/24 Python
Python工厂函数用法实例分析
2018/05/14 Python
Python3.5基础之NumPy模块的使用图文与实例详解
2019/04/24 Python
pytorch实现mnist数据集的图像可视化及保存
2020/01/14 Python
Python新手学习raise用法
2020/06/03 Python
Python如何绘制日历图和热力图
2020/08/07 Python
iphoneX 适配客户端H5页面的方法教程
2017/12/08 HTML / CSS
局部内部类是否可以访问非final变量?
2013/04/20 面试题
解释一下ruby中的特殊方法与特殊类
2013/02/26 面试题
计算机学生的自我评价分享
2014/02/18 职场文书
关于运动会的广播稿(10篇)
2014/09/12 职场文书
2015年中学校长工作总结
2015/05/19 职场文书
生死抉择观后感
2015/06/09 职场文书
开网店计划分析
2019/07/30 职场文书