伪聊天室实现记录

最新推荐文章于 2024-08-22 14:32:34 发布
最新推荐文章于 2024-08-22 14:32:34 发布
阅读量798 收藏
点赞数
分类专栏： javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/maskice/article/details/53895793
版权

参考样式（css自定义聊天窗口样式）：http://www.downyi.com/downinfo/33029.html

功能描述：

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;



maskice
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
java聊天室（有截图功能）
06-02
这是一个简单的java聊天室的代码，可以实现登陆，好友列表，更改字体，传输文件等功能，值得参考
基于html5+css3实现的精美聊天界面demo
07-27
在这个聊天界面中，HTML5可能被用来创建结构化的聊天窗口，包括输入框、发送按钮、以及显示聊天记录的区域。使用`<section>`、`<article>`、`<header>`、`<footer>`等语义化标签可以清晰地定义各个部分，增强页面的...
微信小程序 仿微信聊天界面
qq_36158551的博客
01-26 6330
当软键盘弹起时，将scroll-view的高度缩短至软键盘遮挡不到的屏幕上方部分，当软键盘收起时，再将scroll-view的高度还原，这样解决了遮挡问题。（3）（推荐）将所有msg都编号如：msg-0，msg-1，msg-2…（1）计算每条消息的最大高度，设置scroll-top=(单条msg最大高度 * msg条数)px。在scroll-view中添加：scroll-into-view=‘{{toView}}’，点击输入框弹出软键盘后，将已有的少许聊天内容弹出，导致看不到的问题。
“伪QQ”---一个即时聊天通讯的工具
weixin_43764094的博客
10-26 599
文章目录前言头文件服务器端代码客户端代码头文件字库源码 前言 这里编写了一个即时通讯工具，不同的客户端可以通过连接服务器进行聊天互动，发表情和传文件； 数据量比较多，因此用了几个链表方便存储管理数据，看代码要从主函数开始看起，按照主函数的脉络会发现主要实现的逻辑关系为：登陆——刷新好友列表——连接其他客户端——聊天/发送表情/发送文件——关闭聊天界面； 头文件 #ifndef MYIOHEAD_H_ #define MYIOHEAD_H_ #include <time.h> #include &
聊天室的实现（消息实时刷新）
hpugym的专栏
12-29 5672
简单的对话框：实现消息的两秒一刷新，获取消息记录； 页面加载时，消息框中的滑块处于最低端，向上滑动可以查看历史信息，此时刷新信息的时候，不在刷新滑块，使其仍处于最底层，也就是说，当滑块滚动的时候，不在受实时刷新的控制。当输入新的信息的时候，启动滑块的刷新，使其刷新到最底层（当前DIV的最底层）。另外，内容发送会显示发送状态，2秒后自动消失。 代码实现： index.html
基于SpringBoot+Redis实现的仿QQ伪桌面聊天系统.zip
05-25
由于Redis支持多种数据结构（如字符串、哈希、列表、集合、有序集合），因此它非常适合实现聊天室这样的实时数据应用场景。例如，聊天记录可以存储为列表，新消息通过LPUSH添加到列表头部，而用户可以通过LRANGE获取...
基于-linux网络聊天室设计.doc
09-27
数据构造的选择和设计是关键，它决定了聊天室如何存储和处理用户的信息及聊天记录。同时，将程序划分为多个功能模块有助于代码的组织和维护，每个模块有其特定的任务，且通过接口与其他模块进行交互。例如，可能有一...
Web聊天室 基于jQuery新皮肤随机聊天功能.zip
11-01
【标题】"Web聊天室 基于jQuery新皮肤随机聊天功能" 提示我们这个项目是关于构建一个网络聊天室的，它利用了jQuery库来实现动态交互，并且具有随机切换皮肤的功能。jQuery是一个广泛使用的JavaScript库，它简化了...
react-win95聊天
03-02
《React-Win95聊天室：重温经典与现代技术的交融》 在当前的Web开发领域，React作为一款由Facebook推出的高效、灵活的JavaScript库，已经成为了构建用户界面的首选工具。而Redux作为状态管理的利器，更是为复杂应用...
尬聊器（伪聊天机器人）
Calvert的博客
01-15 756
哈哈哈就只会回这句，实现如下 首先要在app/build.gradle中加依赖库 compile 'com.android.support:recyclerview-v7:23.4.0'要跟上面一样版本 接着主xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" and
基于java网络聊天室--截图实现
weixin_34392843的博客
07-11 382
package com.silianbo; /* * To change this license header, choose License Headers in Project Properties. * To change this template file, choose Tools | Templates * and open the template in t...
js实现图片左右垂直翻转
木偶笔记
03-31 9125
js实现图片左右垂直翻转
使用jquery为dropdownchecklist动态设置值
木偶笔记
06-16 2325
代码截取： function cityChange(){ var city = $("#city").val(); $("#cityval").val(city); var cv = $("#cityval").val(); $.post("../servlet/Area?type=city", { city : cv }, function(data
简易js网页实时时钟日历
木偶笔记
02-02 1480
function timeF(i){ if(i<10){ i="0"+i; } return i; } function showtime() { var today,hour,second,minute,year,month,date; var strDate ; today=new Date(); var n_day = today.getDay(); switch (n
Uploadify配置记录以及上传Session丢失问题解决java版
木偶笔记
10-19 1045
版本是v3.2.1 $(function() {     $('#file_upload').uploadify({         'formData'          : {'sessionUser':'',                             'uploadParm':'1'},// sessionUser参数为固定且必有参数,uploadParm...可以
vue开发引入第三方插件的方式及其区别
最新发布
你们瞎搞
08-22 366
npm。
2024前端面试题-js篇
FormAda的博客
08-22 844
是数组的一种迭代方法，主要用于对数组中的每一项执行给定的函数。它只是简单地对数组进行遍历，没有提供跳出循环的机制。基础数据类型：string,number,boolean，null，undefined，bigInt，symbol。在规定的时间内没有触发事件，就执行函数，如果在规定的时间触发了时间久重新开始计时。当异常被抛出时，正常的流程被打断，可以通过。函数执行一次后，在规定的时间内不再执行。块捕获异常，从而实现停止迭代的效果。执行顺序：同步代码->微任务->宏任务。引用数据类型：Object。
Linux下局域网聊天室设计实现
"这篇报告是关于长沙理工大学计算机与通信工程专业的学生进行的《高级操作系统》课程设计，主题为‘基于Linux网络聊天室的设计’。学生需要利用Linux技术，特别是Berkeley套接口编程，来实现一个局域网聊天工具，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值