首页 > 代码库 > 模拟聊天室显示语句保持最新显示
模拟聊天室显示语句保持最新显示
<!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>
模拟聊天室显示语句保持最新显示
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。