简易聊天对话框（源码）

　　今天看了几个JS的视频，视频中布置了一个编写一个简易聊天对话框的任务，没有涉及到Ajax.主要实现了切换头像模拟两方的聊天情况，样式比较简单，后期可以进行美化。

      需要注意的地方是我是用的一个div标签来实现元素的添加，这样更利于样式的设置，每添加一个对话框需要清除一下浮动，不然会出现连续几个对话框出现在一行的现象。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        .box{width:300px;height:400px;margin: 20px auto;border: solid 1px black}
        .box .cont{height: 300px;border-bottom: solid 1px black;overflow: auto;}
        .cont div{max-width:220px;margin: 4px;padding: 4px;border-radius: 6px;clear: both;word-wrap: break-word;}
　　　　　/*给div设置最大宽度并且使用break-word使div内容自动换行*/
        .cont div:nth-child(2n){background: skyblue;float: left}
　　　　　/*设置点击发送次数为偶数时，div左浮动*/
        .cont div:nth-child(2n-1){background: orange;float: right}
　　　　　/*设置点击发送次数为奇数时，div右浮动*/
        .box .btns{height: 99px}
        .btns *{height: 99px;border: none;padding: 0;margin: 0;background: none;float: left;}
        #txt{width: 260px;padding: 20px;box-sizing: border-box}
        #send{width: 40px;border-left: solid 1px black;}
        </style>
    </head>
    <body>
        <div class="box">
            <div class="cont"></div>
            <div class="btns">
                <textarea id="txt"></textarea>
                <input type="button" value="发送" id="send" />
            </div>
        </div>
    </body>
    <script>
        var oTxt = document.getElementById("txt");
        var oSend = document.getElementById("send");
        var oCont = document.querySelector(".cont");
        // var oCont = document.getElementsByClassName("cont")
        oSend.onclick = function(){　　　　　　　　　　　　　// 创建oSend的点击事件
            var odiv = document.createElement("div");　　
            odiv.innerHTML = oTxt.value;　　　　　　　　　 // 把txt输入框内的内容赋值给div
            oCont.appendChild(odiv);　　　　　　　　　　　　//把创建的div插入到cont标签子元素内
            odiv.scrollIntoView();　　　　　　　　　　　　　//让当前的元素滚动到浏览器窗口的可视区域内
            oTxt.value = "";　　　　　　　　　　　　　　　　 //清除文本框内容
        }
    </script>
</html>

 

posted @ 2019-08-26 16:25  Zzexi  阅读(1315)  评论(0)    收藏  举报