制作H5页面,有时候会有个聊天场景这样的效果,对话聊天信息不断的有序弹出。
步骤:
1.先弄出个具有全部聊天信息记录的静态页面;
2.保留最外边的大框架,我这里是div标签,其余聊天记录先注释;
3.写js,因为是有序的出现,所以需要使用定时器来实现;
部分代码如下(样式未加):
<div class="chartCon" id="chartCon"></div>
$(function () {
//群聊头像、名字、内容 start
var array = [
{
content: "2016年10月"//群聊时间
},
{
content: "zhl_cafe_noir加入群聊"//进群提示
},
{
headImg: "images/老三.png",//头像
name: "老三",//昵称
content: "你们啥时候建了个群啊?"//聊天内容
},
{
headImg: "images/老二.png",
name: "老二",
content: "在你不知道的时候,哈哈哈"
}];
//群聊头像、名字、内容 end
//每隔0.5秒有序显示一条群聊信息 start
var 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里面的内容。