模擬聊天室顯示語句保持最新顯示

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模擬聊天室顯示語句保持最新顯示</title>
<style>
*{
border-collapse: collapse;
}
.dialog_box{
width:400px;
height: 600px;
margin:0 auto;
background:#B4D9EA;
border:10px solid #B4D9EA;
}
.box_content{
width:100%;
height: 400px;
overflow-y: scroll;
}
.box_content p{
line-height: 30px;
word-wrap: break-word; 
word-break: normal; 
}
.input_content{
width:400px;
height: 200px;
margin-top: 10px
}
#input_info{
height: 130px;
resize: none;
width: 370px;
font-size: 24px;
padding: 15px;
color: #232323;
border:none;
background:#fff;
}
.btn_submit{
float: right;
padding: 5px 15px;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="dialog_box">
<div class="box_content">
</div>
<div class="input_content">
<textarea name="" id="input_info"></textarea>
<button type="submit" class="btn_submit">提交</button>
</div>
</div>
<script src="jquery-min.js"></script>
<script>
$(function(){
var boxCon = $(".box_content"),
pLen;
$('.btn_submit').click(function(){
var p = document.createElement("p");
p.innerHTML = $('#input_info').val();
$('.box_content').append(p);
$('#input_info').val('')
var scrollH = 0;
pLen = $(".box_content p").length;
for(var i=0;i<pLen;i++){
scrollH += $(".box_content p").eq(i).outerHeight(true);
}
if(scrollH > 400){
boxCon.scrollTop(scrollH);
}
$('#input_info').focus();
})
})</script>
</body>
</html>

轉載于:https://www.cnblogs.com/webBlog-gqs/p/7103915.html

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/371813.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/371813.shtml
英文地址，請注明出處：http://en.pswp.cn/news/371813.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！