<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>张铭达的聊天室</title>

</head>

<body>

    <div id="contents" style="height:500px;overflow:auto; border:green solid 2px"></div>

    <div>

        <textarea id="msg" style="width: 260px;height: 120px" placeholder="输入要发送的内容"></textarea>

        <input id="send_msg" type="submit" href="javascript:;" onclick="sendMsg()" value="发送">

    </div>

    <script src="{{static_url('js/jquery.min.js')}}"></script>

    <script type="text/javascript">

        //监控键盘Enter 回车键按下的动作

        document.onkeydown = function(e){

            if((e||event).keyCode==13)

                sendMsg();

        };

        ///////////////ws创建&监控接收消息处理动作/////////////////////////

        //创建ws协议连接，创建出来后就已经和服务端建立连接

        var ws = new WebSocket("ws://127.0.0.1/chat?username={{current_user}}");

        /////////////////////收到WebSocket消息//////////////////////////

        ws.onmessage = function(recv) {

            // $("#contents").append("<p>" + recv.data + "</p>"); //jquery 向div中添加内容

            var div = document.getElementById('contents');

            div.innerHTML = div.innerHTML  +  recv.data + '<br>';

            div.scrollTop = div.scrollHeight; //当前div的滚轮始终保持最下面

        };

        ////////////////////发送WebSocket消息////////////////////////

        function sendMsg() {

            $('#msg').val($('#msg').val().trim());//去除输入前后的空格

            var msg = $("#msg").val();

            if ( msg && msg.length >0) {

                data = {

                    // username:username,

                    msg:msg

                };

                ws.send(JSON.stringify(data));

                $("#msg").val("");

            }else {

                console.log('内容不许为空')

            }

        }

    </script>

</body>

</html>

div中出现滚动条，自动保持在最底端---显示聊天窗口最新的信息的更多相关文章

  1. 一款回到顶部的 jQuery 插件，支持 Div 中的滚动条回到顶部

    前言 今天在网上搜索“回到顶部”的 jQuery 插件,网上有很多,但是大部分都不支持让 Div 中的滚动条回到顶部.于是乎,不放弃,自己参考 Github 上的一个 jQuery 插件,经过自己的修 ...

  2. delphi 自动滚动到最底端scroll

    自动滚动到最底端scrollUses MSHTML;{$R *.dfm}var  ScrollPos: integer=0;procedure TForm1.Button1Click(Sender: ...

  3. div中添加滚动条

    <div style="position:absolute; height:400px; overflow:auto"></div>div 设置滚动条显示: ...

  4. div中设置滚动条的问题

    <div srtle="width:100px;height:50px;"></div> 这样的一个div,当文本超出的时候我们就会设: overflow: ...

  5. ListCtrl中垂直滚动条自动滚动

    在用ListCtrl控件时,当向该控件中添加数据时,怎么样可以把滚动条时时滚动到最后一行,这样便可看到添加的新数据内容 1 加完数据后执行 EnsureVisible(最后一行索引) 可以保证滚动到最 ...

  6. Vue中实现聊天窗口overflow:auto自动滚动到底部，实现显示当前最新聊天消息

    在做消息的项目,当有新消息的时候让新消息出现在最底部,此时的box用的是overflow:auto 注意:vue项目需要注意在dom结构渲染完再进行操作 <div class="mai ...

  7. c/s程序版本自动升级的问题,如何判断client端版本号是否最新,然后从指定ftp服务器down

    c/s程序版本自动升级的问题,如何判断client端版本号是否最新,然后从指定ftp服务器down http://blog.csdn.net/delphizhou/article/details/30 ...

  8. [聊天框]让DIV的滚动条自动滚动到最底部 - 4种方法

    要制作一个在线聊天的程序,在做最后的修饰时,需要对获得的信息即时滚动以保证用户总能看到最新消息. 聊天程序是基于AJAX设计的,没有用框架,消息容器是一个DIV,所以问题就在于如何控制DIV的滚动条. ...

  9. 让DIV的滚动条自动滚动到最底部 - 4种方法

    方法一:使用锚标记要滚动到的位置,然后通过click方法模拟点击滚动到锚所在位置 <script language="javascript1.2" type="te ...

随机推荐

  1. 十一. Go并发编程--singleflight

    一.前言 1.1 为什么需要Singleflight? 很多程序员可能还是第一次听说,本人第一次听说这个的时候以为翻译过来就是程序设计中被称为的是 "单例模式". google之后 ...

  2. Codeforces 446C - DZY Loves Fibonacci Numbers（斐波那契数列+线段树）

    Codeforces 题目传送门 & 洛谷题目传送门 你可能会疑惑我为什么要写 *2400 的题的题解 首先一个很明显的想法是,看到斐波那契数列和 \(10^9+9\) 就想到通项公式,\(F ...

  3. GWAS分析结果中pvalue/p.ajust为0时如何处理？

    在GWAS分析的结果中,偶尔会遇到到pvalue为0的SNP位点,这时如果直接做曼哈顿或QQ图,会出错,因为log0无意义. 此时,该如何处理? 如果你用的是Plink1.9来做的GWAS,可加一个参 ...

  4. Linux—ps -ef 命令输出信息的具体含义(显示所有正在运行的命令程序)

    linux 中使用 ps -ef 输出参数的具体含义 功能:显示所有正在运行的命令程序 UID: 说明该程序被谁拥有PID:就是指该程序的 IDPPID: 就是指该程序父级程序的 IDC: 指的是 C ...

  5. Prometheus基础

    监控系统作用 监控系统主要用于保证所有业务系统正常运行, 和业务的瓶颈监控. 需要周期性采集和探测. 采集的详情 采集: 采集器, 被监控端, 监控代理, 应用程序自带仪表盘, 黑盒监控, SNMP. ...

  6. 作业帮上万个 CronJob 和在线业务混部，如何解决弱隔离问题并进一步提升资源利用率？

    作者 吕亚霖,作业帮基础架构 - 架构研发团队负责人.负责技术中台和基础架构工作.在作业帮期间主导了云原生架构演进.推动实施容器化改造.服务治理.GO 微服务框架.DevOps 的落地实践. 别路,作 ...

  7. 学习java的第十一天

    一.今日收获 1.学习java完全学习手册2.9.3循环结构的内容并验证例题 2.观看哔哩哔哩上的教学视频 二.今日问题 1.基本没有 三.明日目标 1.继续完成2.9.3循环结构的例题 2.哔哩哔哩 ...

  8. Node.js 概述

    JavaScript 标准参考教程(alpha) 草稿二:Node.js Node.js 概述 GitHub TOP Node.js 概述 来自<JavaScript 标准参考教程(alpha) ...

  9. 纯CSS圆环与圆

    1. 两个标签的嵌套: <div class="element1"> <div class="child1"></div> ...

  10. vue SCSS

        C:\eclipse\wks\vue\esql-ui>node -v v12.18.1 C:\eclipse\wks\vue\esql-ui>npm -v 6.14.5 直接修改p ...