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

  制作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里面的内容。