当前位置: 首页 > 编程笔记 >

JavaScript仿聊天室聊天记录

周弘盛
2023-03-14
本文向大家介绍JavaScript仿聊天室聊天记录,包括了JavaScript仿聊天室聊天记录的使用技巧和注意事项,需要的朋友参考一下

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 上一节我们用ws模块创建了一个WebSocket应用。但是它只能简单地响应ECHO: xxx消息,还属于Hello, world级别的应用。 要创建真正的WebSocket应用,首先,得有一个基于MVC的Web应用,也就是我们在前面用koa2和Nunjucks创建的Web,在此基础上,把WebSocket添加进来,才算完整。 因此,本节的目标是基于WebSocket创建一个在线聊天室。 首先,我们

  • 本示例通过两种形式展示了如何实现一个在线聊天室应用: 使用长轮询模式。 使用 WebSocket 模式。 以上两种模式均默认将数据存储在内存中,因此每次启动都会被重置。但您也可以通过修改 conf/app.conf 中的设置来启用数据库。 以下为项目组织大纲: WebIM/ WebIM.go # main 包的文件 conf app.conf

  • 仿QQ聊天布局,tableView图文混排,可根据聊天内容不同自动调整文字信息大小和位置。 [Code4App.com]

  • 一个软体室软件。 服务器端是py 客户端是flash 把flash 中的swf文件放到网站上。 把服务器端启动 就可以测试了。

  • 即时聊天是工作沟通中必不可少的工具。钉钉的即时聊天具有消息一触即达、身份和信息双重安全保障、群聊可精细化管理等特性,帮助你的企业实现工作沟通与生活聊天分离,让工作重回专注。 全员群管理 全员群开启 ● 团队创建完成后,默认会开启全员群。 全员群设置 ● 管理员可以登录管理员后台,对全员群进行设置。 登录管理员后台,点击通讯录中企业名称右侧的设置 查看全员群信息 设置全员群群主(默认是管理员) 修改

  • 本文向大家介绍JavaEE7+Websockets+GlassFish4打造聊天室,包括了JavaEE7+Websockets+GlassFish4打造聊天室的使用技巧和注意事项,需要的朋友参考一下 在客户机和服务器之间建立单一的双向连接,这就意味着客户只需要发送一个请求到服务端,那么服务端则会进行处理,处理好后则将其返回给客户端,客户端则可以在等待这个时间继续去做其他工作,整个过程是异步的。在本