js模拟群聊场景-聊天信息动态出现效果

制作H5页面，有时候会有个聊天场景这样的效果，对话聊天信息不断的有序弹出。

步骤：

1.先弄出个具有全部聊天信息记录的静态页面；

2.保留最外边的大框架，我这里是div标签，其余聊天记录先注释；

3.写js，因为是有序的出现，所以需要使用定时器来实现；

部分代码如下（样式未加）：

<div class="chartCon" id="chartCon"></div>

$(function () {//群聊头像、名字、内容 startvar array = [{content: "2016年10月"//群聊时间},{content: "zhl_cafe_noir加入群聊"//进群提示},{headImg: "images/老三.png",//头像name: "老三",//昵称content: "你们啥时候建了个群啊？"//聊天内容},{headImg: "images/老二.png",name: "老二",content: "在你不知道的时候，哈哈哈"}];//群聊头像、名字、内容 end//每隔0.5秒有序显示一条群聊信息 startvar i = 0;function massageShow() {switch(i){case 0:$("#chartCon").append("<div><span>"+array[i].content+"</span></div>");i++;break;case 1:$("#chartCon").append("<div><span>"+array[i].content+"</span></div>");i++;break;case 2:$("#chartCon").append("<div><img src='"+array[i].headImg+"'/><div>"+array[i].name+"</div><div>"+array[i].content+"</div></div>");i++;break;case 3:$("#chartCon").append("<div><img src='"+array[i].headImg+"'/><div>"+array[i].name+"</div><div>"+array[i].content+"</div></div>");i++;break;case 4:$("#chartCon").append("<div><img src='"+array[i].headImg+"'/><div>"+array[i].name+"</div><div>"+array[i].content+"</div></div>");i++;var c = window.document.body.scrollHeight;window.scroll(0,c);clearInterval(t); //清除定时器break;}}var t=setInterval(massageShow,500);//每隔0.5秒有序显示一条群聊信息 end
});

tip：switch case append()里面的内容是步骤2注释掉的，其中的某些信息修改为对应的array里面的内容。

js模拟群聊场景-聊天信息动态出现效果相关推荐

Linux-Socket实现模拟群聊（多人聊天室）
Linux-Socket实现模拟群聊(多人聊天室) 简单版本服务端源码 #include<stdio.h> #include<stdlib.h> #include<pt ...
【企业数字化转型】数据可视化技术：Three.js 用Physijs在场景中添加物理效果
Three.js 极简教程简介 Three.JS 是什么 Three.JS是基于WebGL的Javascript开源框架,简言之,就是能够实现3D效果的JS库. Three.JS 能做什么利用Th ...
js模拟群聊天php,jquery仿微信聊天界面实例分享
本文主要为大家详细介绍了jquery仿微信聊天界面的相关代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 首先看一下我们的效果图. 这个颜色可能搭配的有些不合适,但基本功能大 ...
基于AcrGIS平台实现三维场景下的积水效果动态模拟
文章目录 1.前言 2.环境准备 3.开发过程 3.1 软件安装 3.2 共享(发布)场景服务 3.3 积水区三维可视化 3.4 动态模拟 4. 完整代码 5. 效果图 6. 在线演示 1.前言现有 ...
【uni-app】小程序实现微信在线聊天（私聊/群聊）
之前学习使用uni-app简单实现一个在线聊天的功能,今天记录一下项目核心功能的实现过程.页面UI以及功能逻辑全部来源于微信,即时聊天业务的实现使用socket.io,前端使用uni-app开发,后端 ...
微信试行松绑外链：点对点聊天可直接访问，群聊试开放电商类外链
11月29日,从微信获悉,为进一步落实"以安全为底线,分阶段.分步骤"实施的互联互通方案,在有关监管部门指导下,微信于即日起开始对外部链接管理措施进行更新.更新内容如下: 1.在点 ...
极客日报：字节员工操纵抖音热榜被判刑；微信群聊可直接访问电商外链；JetBrains发布新一代编辑器Fleet
一分钟速览新闻点! 中国互联网企业综合实力指数(2021)发布:BAT仍列前三微信群聊可直接访问电商外链消息称美团智慧交通平台拆分,打车事业部独立字节员工操纵抖音热榜被判刑苹果再成为中国最大智 ...
模仿微信群聊管理功能（头像管理效果）
在社交类应用开发中经常用到群管理功能,来约束访问范围. 本文讲述的是如何实现类似微信群聊时成员管理的UI效果. 先上效果图: (添加状态) (删除状态) (添加成功) UI效果概述: 1. +图标,单 ...
【Android App】实战项目之仿微信的私信和群聊App（附源码和演示视频超详细必看）
需要全部代码请点赞关注收藏后评论区留言私信~~~ 手机最开始用于通话,后来增加了短信功能,初步满足了人与人之间的沟通需求.然而短信只能发文字,于是出现了能够发图片的彩信,但不管短信还是彩信,资费都太贵 ...

js模拟群聊场景-聊天信息动态出现效果

js模拟群聊场景-聊天信息动态出现效果相关推荐

最新文章

热门文章