简易聊天对话框(源码)

来源:博客园 分类: 文章浏览史 发布时间:2020-09-26 19:08:32 最后更新:2020-09-26 浏览:133
转载声明:
本文为摘录自“博客园”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
2020-09-26 19:08:32

  今天看了几个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>
复制代码

 

php技术微信