没怎么写过聊天界面,最近上手的项目要求,在这,进行一下简单的实现过程。有所不足,请多多指教:
然后我们要实现的效果如下:
实现代码如下:
html:
<ul id="talkArea" style="border: 1px solid;width: 100px;height: 100px;overflow: auto;"></ul>
<input type="text" id="getMsg">
<button id="sendMsg" style="width: 50px;height: 50px;">发送</button>
js:(记得引入jquery)
$("#sendMsg").click(function () {
//从input中获取数据,挂载到ul上
$("#talkArea").append((`
<li>${$("#getMsg").val()}</li>
`)).siblings('#getMsg').val('');
//然后重点来了,
var talkArea = document.getElementById('talkArea');
talkArea.scrollTop = talkArea.scrollHeight;
})
方法还有很多,这次先介绍一种。