模拟聊天室显示语句保持最新显示
生活随笔
收集整理的這篇文章主要介紹了
模拟聊天室显示语句保持最新显示
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!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
總結
以上是生活随笔為你收集整理的模拟聊天室显示语句保持最新显示的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Eclipse安装以及JDK环境变量配置
- 下一篇： varnish基础