js 实现破产版聊天对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
     
     width: 400px;height: 500px;border: solid 1px black; margin: 0px auto;}
        .cont{
     
     height: 400px;border-bottom:solid 1px black;overflow: auto;}
        .cont div{
     
     border-radius: 10px;padding: 10px;margin: 10px; max-width: 240px; clear:both;}
        /* 清除浮动的影响 让他们隔行显示*/
        .cont div:nth-child(2n){
     
     background:greenyellow; float: left;}
        .cont div:nth-child(2n-1){
     
     background: #66f; float: right;}

    </style>
</head>
<body>
    <div id="box">
        <div class="cont">
        </div>
        <form>
            <textarea id="txt"></textarea>
            <input type="button" value="发送" id="btn">
        </form>
    </div>
</body>
<script>
     var otxt = document.getElementById('txt');
    var obtn = document.getElementById("btn");
    var ocont = document.querySelector(".cont");



    obtn.onclick = function(){
     
     
        // 给obtn添加点击事件并执行下面点击发送
        send()
}
    otxt.onkeydown = function(eve){
     
     
        // 文本框自带焦点所以要把键盘事件加给otxt 如果没有焦点默认是document
        var e= eve ||window.event;
        // 事件对象的兼容
        var code = e.keyCode ||e.which
        // 键码的兼容 key Code用来记录按键
        if(code === 13 && e.ctrlKey){
     
     
        // ctrl+回车发送
            send();
             // 文本域在回车后会出现换行，所以阻止默认事件
            e.preventDefault();
        }
    }

   function send(){
     
     
        //    在js中创建div
        var div = document.createElement("div");
        // 把文本域中的内容添加到div中
        div.innerHTML= otxt.value;
        // 上面给已经给ocont设置过样式 appendChild是子元素添加到父元素div中
        ocont.appendChild(div);
        // 清空输入框
        otxt.value = "";
        // 将最新的信息元素显示在你可视区域内 随着你最新内容的移动而移动
        ocont.scrollTop = div.offsetTop;
   }
</script>
</html>
如有异议欢迎各位大佬私信！
js 实现 破产版 聊天对话框

猜你喜欢

js 实现破产版聊天对话框
