Easy Chat dialog box (source)

　　Today saw the video a few JS, arranged a video chat dialog to write a simple task, not related to Ajax. The main achievement of the analog switch chat avatar both cases, style is relatively simple, the latter can be landscaped.

Note that the place I was in a div tag to add elements to achieve, which is more conducive to the style settings, each adding a floating dialog box to clear it, otherwise there will be several consecutive dialog box appears in the phenomenon of the line.

<! DOCTYPE HTML> 
<HTML> 
    <head> 
        <Meta charset = "UTF-. 8"> 
        <title> </ title> 
        <style type = "text / CSS"> 
        .box {width: 300px by; height: 400px; margin : Auto 20px; border: 1px Black Solid} 
        .box .cont {height: 300px by; border - bottom: Solid 1px Black; overflow: Auto;} 
        .cont div max { -width: 220px; margin: 4px; padding: 4px; RADIUS-border: 6px; Clear: both; Word-wrap: BREAK - Word;} 
　　　　　/ * set the maximum width to the div and that the use of break-word content wrap div * / 
        .cont div: Nth -child (2N) {background : Skyblue; a float : left} 
　　　　　/ * set clicks transmission number is an even number, div left floating * / 
        .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.the innerHTML oTxt.value; // the input box content txt is assigned to div=
         
            oCont.appendChild (odiv); // created the div tag inserted into the cont sub-elements 
            odiv.scrollIntoView ();// let the current element to scroll the browser window visible area
            oTxt.value = "" ; // Clear the contents of the text box 
        }
     </ Script> 
</ HTML>

Easy Chat dialog box (source)

Guess you like