【前端笔记】

吐槽一下百度贴吧，这个贴吧那个系统检测能力也算是白痴到不行，发一段html代码会被删贴，发js代码被删帖子，系统是傻逼吗？申请恢复居然也可以失败，那管理员也是傻逼吗？对不起说了粗话，抱歉抱歉。

总之我决定把笔记内容全部都转移到csdn上来，也希望对其他小伙伴有帮助。

【在线聊天】

首先要让聊天框里面内容能够自动扩张，方法是首先确保此div的height是固定的。然后再在div中添加一个属性即可。

<div class="content_add" style="height: 100%; overflow:auto;">

注意这里的100%并非所有场合都适应，不适应的时候需要改为固定的像素值为单位。

其次是如何显示对方消息和自己消息，方法就是用浮动的方式，对方的消息float: left; 自己的右浮动。

再其次如何让对方的消息和我自己的消息不在同一行。方法就是用列表的方式。

 <dl class="content_add" style="height: 100%; overflow:auto;">
    <dt>
       <div class="content_left">
          欢迎欢迎！
       </div>
    </dt>
</dl>

再其次 如何让消息添加到对应的位置来显示，方法是用jQuery让元素自己append.

 $(".content_add").append(" <dt>" +
    "<div class=\"content_right\">" +
      text +
   "</div>" +
   "</dt>");
$("#text").val("");

接着是如何绑定按键，方法如下：

 $(document).ready(function(){
            var t=1;
            $("#text").keydown(function(event) {
                if (event.keyCode == 13) {
                var text = $("#text").val();
                if (text == null) {
                    // alert("");
                } else {
                    $(".content_add").append(" <dt>\n" +
                        "              <div class=\"content_right\">\n" +
                        text + "                \n" +
                        "              </div>\n" +
                        "            </dt>");
                    $("#text").val("");
                }
                itit++;
                $(".content_add").scrollTop(1000 * itit);
                }
            });
        });

最好还有如何让滑轮滑到最底，就是以上最后几行，总的策略就是，让一个全局变量，在每显示一个消息的时候自己++

总而言之js代码如下：

    <script>
        var itit=1;
        $(document).ready(function(){
            $("#btn").click(function(){
                    var text = $("#text").val();
                    if (text == null) {
                        // alert("");
                    } else {
                        $(".content_add").append(" <dt>\n" +
                            "              <div class=\"content_right\">\n" +
                            text + "                \n" +
                            "              </div>\n" +
                            "            </dt>");
                        $("#text").val("");
                    }
                    itit++;
                    $(".content_add").scrollTop(1000*itit);

            });
        });

        $(document).ready(function(){
            $("#showChat").click(function(){
                var h = $(document).height()*2/3 ;
                $('.chat_content').css("height", h);
            });
        })

        $(document).ready(function(){
            var t=1;
            $("#text").keydown(function(event) {
                if (event.keyCode == 13) {
                var text = $("#text").val();
                if (text == null) {
                    // alert("");
                } else {
                    $(".content_add").append(" <dt>\n" +
                        "              <div class=\"content_right\">\n" +
                        text + "                \n" +
                        "              </div>\n" +
                        "            </dt>");
                    $("#text").val("");
                }
                itit++;
                $(".content_add").scrollTop(1000 * itit);
                }
            });
        });
    </script>

【如何检测按键】

扫描二维码关注公众号，回复： 1716969 查看本文章

请看这个例子就自然明白了

<html>
<body>
<script type="text/javascript">

 

function noNumbers(e)
{
    var keynum;
    var keychar;

    keynum = window.event ? e.keyCode : e.which;
    keychar = String.fromCharCode(keynum);
    alert(keynum+':'+keychar);
}

</script>
<input type="text" onkeydown="return noNumbers(event)" />
</body>
</html>

吐槽一下百度贴吧，这个贴吧那个系统检测能力也算是白痴到不行，发一段html代码会被删贴，发js代码被删帖子，系统是傻逼吗？申请恢复居然也可以失败，那管理员也是傻逼吗？对不起说了粗话，抱歉抱歉。

总之我决定把笔记内容全部都转移到csdn上来，也希望对其他小伙伴有帮助。

猜你喜欢