js实现聊天对话框


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{width: 400px;height: 500px;border: solid 1px black;margin: 20px auto;}
        .msg{height: 400px;border-bottom: solid 1px black;overflow: auto}
        .msg div{max-width: 300px;padding: 4px;margin: 4px;border-radius: 4px;clear: both;}
        .msg div:nth-child(2n){float: left;background: #55f;}
        .msg div:nth-child(2n-1){float: right;background: #5f5;}

        .form{height: 99px;}
        .form *{margin: 0;padding: 0;border: none;float: left;}
        #txt{width: 300px;height: 99px;border-right: solid 1px black;}
        #btn{width: 99px;height: 99px;display: block;}
    </style>
</head>
<body>
    <div id="box">
        <div class="msg">
            
        </div>
        <div class="form">
            <input type="text" id="txt">
            <input type="button" id="btn" value="发送">
        </div>
    </div>
</body>
<script>
    var otxt = document.getElementById("txt");
    var obtn = document.getElementById("btn");
    var omsg = document.querySelector(".msg");

    obtn.onclick = function(){
        // 判断是否为空,空就停止
        if(otxt.value == ""){
            return ;
        }
        // 创建元素,准备放置内容
        var div = document.createElement("div");
        div.innerHTML = otxt.value;
        omsg.appendChild(div);
        
        // 发送结束后,清空输入框
        otxt.value = ""; 

        // 当信息过多时,设置信息框的滚动条为当前总高度,保证滚动条在最下方,显示最新信息
        omsg.scrollTop = omsg.scrollHeight;
    }

    // 注意:当前案例的布局,非常重要,布局没有做好,js效果就不对了

</script>
</html>

js实现聊天对话框_第1张图片

你可能感兴趣的:(js实现聊天对话框)