首先给大家说一声抱歉，小编最近和女朋友闹矛盾，断更了一周呀
唉，实在是罪过呀，不远两千多公里从北京跑到广州，哄女朋友开心，我也没谁了
宝宝心里苦，宝宝就是不说。
好了，言归正传，咱们回到就是实现发短信的功能，其实这个很好实现的主要的是创建元素（document.createElement），然后给元素添加子节点（appendChild）
结合这两点。
首先给出效果图，嘿嘿嘿嘿~~~
1111111111111111111111.png
对话有点儿邪恶，大家当做段子听听就可以了
咳咳咳，我们还是想先把门户（html + css）写好
<style>
*{
box-sizing: border-box;
}
body,html{
height: 100%; overflow: hidden;
}
ul{
padding: 0; margin: 10px 0; list-style: none;
}
.main{
width: 650px;
}
.main>*{
float: left;
}
.user{
padding-right: 50px;
}
.user section{
border: 1px solid #ccc;background-color: #eee; border-radius: 5px;margin-bottom: 50px;padding: 30px;
}
.user input[type=text]{
width: 100%;
}
#send1{
background-color: dodgerblue;
}
#send2{
background-color: forestgreen;
} .box{
border:1px solid #ccc; background-color: #eee; width: 300px; height: 500px; overflow-y: auto;
}
.box li{
padding: 10px; position: relative; min-height: 60px;
}
.box li:before{
content: ''; width: 40px; height: 40px; position: absolute; top:10px; }
.box .left{
padding-left: 60px; }
.box .left:before{
left:10px;background: url(img/u1.jpg); background-size: cover; } .box .right{
padding-right: 60px; text-align: right; }
.box .right:before{
right:10px; background: url(img/u2.jpg); background-size: cover; } .box span{
word-break: break-all; border-radius: 5px ; background: #fff; line-height: 30px; display: inline-block; padding: 5px; font-size: 14px; }
.box .right span{ background: lime; }
</style>
<div class="main">
<div class="user">
<section>
<input type="text" id="user1-mess">
<input type="button" id="send1" value="发送">
</section>
<section>
<input type="text" id="user2-mess">
<input type="button" id="send2" value="发送">
</section>
</div>
<div class="box">
<ul id="mess-list"></ul>
</div>
</div>
这段代码大家使用的时候注意一下，style和div添加相应的样式和body里边儿。
下面就来说说js实现部分了，我们采用的是原生js，纯手工打造，价值可是很高的哦
<script>
// 获取id的函数封装
function $(id) {
return document.getElementById(id);
}
var messFir = $('user1-mess');
var messSec = $('user2-mess');
var list = $('mess-list');
// 第一个按钮的点击事件
$('send1').onclick = function () {
createMess(messFir.value,'left');
messFir.value = '';
};
// 第二个按钮的点击事件
$('send2').onclick = function () {
createMess(messSec.value,'right');
messSec.value = '';
};
// 接收到信息后创建一个li标签
function createMess(text,style) {
var li = document.createElement('li');
li.className = style;
var span = document.createElement('span');
span.innerText = text;
// 将span添加到li标签下边儿
li.appendChild(span);
// 将li标签添加到ul下边儿
list.appendChild(li);
}
</script>
我相信看了我的源码之后，你可以很好的理解其中的实现原理，个人感觉原生js除了代码量大外，用着还是很灵活的，可以尝试尝试封装自己想要用的方法。
有错误的地方欢迎大家，指正错误，谢谢大家@^_^@
dog.jpg
