简易聊天对话框（源码）
今天看了几个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>
