简易聊天框

<style type="text/css">
body {
	font-size: 14px;
	background-color: #fff;
}

.header {
display: inline-block;
position: absolute;

}
.header img {
border-radius: 16px;
height: 30px;
width: 30px;
}
.content {
display: inline-block;
margin-left: 45px;
}
.all {
margin-top: 20px;
margin-left: 10px;
position: relative;
}
.text {
background-color: #0099ff;
padding: 5px 12px;
margin-top: 1px;
display: inline-block;
color: #ffffff;
line-height: 1.4;
border-radius: 20px;
}
.smile {
display: inline-block;
width: 16px;
height: 16px;
background-image: url(icons.png);
background-position: right right;
margin-left: 3px;
}
.sad {
display: inline-block;
width: 16px;
height: 16px;
background-image: url(icons.png);
background-position: center center;
margin-left: 3px;
}
.love {
display: inline-block;
width: 16px;
height: 16px;
background-image: url(icons.png);
background-position: center right;
margin-left: 3px;
}

</style>

<script type="text/javascript">

var msgs= [
{“face”:“boy1.png”, “msg”: [{“content”:“大家都好吗？明天都有空？”}]},
{“face”:“girl3.png”, “msg”: [{“content”:“我在”}, {“content”:“可以啊，去哪玩？”}]},
{“face”:“girl1.png”, “msg”: [{“content”:“我也在”}]},
{“face”:“girl2.png”, “msg”: [{“content”:“可惜了”}, {“content”:“我可能去不了”}, {“content”:“马上要出差了，我得准备准备”}]},
{“face”:“boy1.png”, “msg”: [{“content”:“下次下次。。。”}]},
];

function renderMsgs() {
var innerHTML = ‘’;
// 遍历聊天信息
msgs.forEach(function(e) {
innerHTML += “

”;
innerHTML += “

”;
innerHTML += “

”;
e.msg.forEach(function(m, i) {
// 设置对话框直角或圆角
if (e.msg.length > 1 && i == 0) {
innerHTML += “

” + m.content + “

”;
} else if (e.msg.length > 1 && i == e.msg.length -1) {
innerHTML += “

” + m.content + “

”;
} else if (i > 0 && i < e.msg.length -1) {
innerHTML += “

” + m.content + “

”;
} else {
innerHTML += “

” + m.content + “

”;
}
});
innerHTML += “

”;
innerHTML += “

”;
});
$("#chatMsgs").append(innerHTML);
}

<div style="width:600px; margin:30px auto;">
    <p><b>聊天框效果：</b></p>
    
    <div id="chatMsgs" style="min-height:400px; border: 1px dashed #ccc;"> 
    </div>
    
</div>