JS模拟手机短信发送

今天实现了用JS模拟手机短信发送的效果，其HTML代码如下：

<div class="out">
  <div class="main-content">
    <div class="head"></div>
    <div class="content">
      <div class="main">
        <div class="main-r-l" id="mainRL">
        </div>
        <div class="main-input">
          <div class="avatar" id="avatar"></div>
          <div class="input-content">
            <input type="text" name="conversation" id="conversation">
          </div>
          <div class="btn">
            <button id="btnSend">发送</button>
          </div>
        </div>
      </div>
    </div>
    <div class="foot">
      <div class="circle-foot"></div>
    </div>
  </div>
</div>

其CSS代码如下：

    * {
      padding: 0;
      margin: 0;
    }
    .out {
      position: relative;
      width: 280px;
      height: 585px;
      border: 1px solid #D6C6A5;
      border-radius: 50px;
      box-sizing: border-box;
      margin: 50px auto;
    }
    .main-content {
      display: flex;
      flex-direction: column;
    }
    .head {
      height: 78px;
      width: 280px;
      background: #E4EEF9;
      border-top-left-radius: 50px;
      border-top-right-radius: 50px;
    }
    .content {
      width: 280px;
      height: 424px;
      display: flex;
      justify-content: center;
    }
    .content .main {
      height: 424px;
      width: 242px;
      box-sizing: border-box;
      border: 3px solid #000000;
      position: relative;
    }
    .main-r-l {
      position: relative;
      box-sizing: border-box;
      height: 360px;
      overflow-y: auto;
    }
    .main-input {
      display: flex;
      align-items: center;
      position: absolute;
      bottom: 0;
      padding-top: 10px;
      padding-bottom: 10px;
      background: #F7F7F7;
      box-sizing: border-box;
      width: 100%;
    }
    .main-input .avatar {
      width: 32px;
      height: 32px;
      border: 1px solid #DED6E7;
      margin-left: 6px;
      margin-right: 6px;
      background-color: #ffffff;
      background-image: url('./a.png');
      background-repeat: no-repeat;
      background-position: center center;
    }
    .main-input input {
      height: 36px;
      width: 142px;
      border: 1px solid #DED6E7;
      border-radius: 5px;
      font-size: 14px;
      padding-left: 2px;
      outline: none;
      margin-right: 6px;
    }
    .main-conversation-r, .main-conversation-l{
      display: flex;
      padding-top: 4px;
      padding-left: 4px;

    }
    .main-conversation-r .conversation-text {
      background-color: #21C618;
      color: #ffffff;
      width: 96%;
      box-sizing: border-box;
      padding-top: 4px;
      padding-left: 2px;
      padding-bottom: 4px;
    }
    .main-conversation-l .conversation-text {
      background-color: #DED6E7;
      color: #ffffff;
      width: 96%;
      box-sizing: border-box;
      padding-top: 4px;
      padding-left: 2px;
      padding-bottom: 4px;
      margin-right: 2px;
    }
    .main-conversation-r .conversation-avatar {
      width: 32px;
      height: 32px;
      background-image: url('./a.png');
      background-repeat: no-repeat;
      background-position: center center;
    }
    .main-conversation-l .conversation-avatar {
      width: 32px;
      height: 32px;
      background-image: url('./b.png');
      background-repeat: no-repeat;
      background-position: center center;
    }
    .btn button {
      border: none;
      background: #F7F7F7;
      font-size: 16px;
      color: #8C8494;
      outline: none;
      cursor: pointer;
    }
    .foot {
      height: 82px;
      width: 280px;
      background: #E4EEF9;;
      border-bottom-left-radius: 50px;
      border-bottom-right-radius: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .circle-foot {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      border: 1px solid #CEB594;
    }

其中主要用到了Flex布局和绝对定位的技巧。
效果图如下：

其中除了头像以外的元素都是由CSS3画出来的，有没有一种很酷的感觉？
本项目的JS代码如下：

var oAvatar = document.getElementById('avatar');
  var obtnSend = document.getElementById('btnSend');
  var oConversation = document.getElementById('conversation');
  oAvatar.addEventListener('click', changeAvatar, false);
  oAvatar.style.backgroundImage = 'url("./a.png")';
  var i = 0;
  /**
   * 改变头像
   */
  function changeAvatar() {
    i = i + 1;
    if (i % 2 === 0) {
      oAvatar.style.backgroundImage = 'url("./a.png")';
    } else {
      oAvatar.style.backgroundImage = 'url("./b.png")';
    }
  }
  obtnSend.addEventListener('click', getConversation, false);
  function getConversation() {
    var divEleR = document.createElement('div');
    divEleR.className = 'main-conversation-r';
    var divEleRTxt = document.createElement('div');
    divEleRTxt.className = 'conversation-text';
    var eleRText = document.createTextNode(oConversation.value);
    divEleRTxt.appendChild(eleRText);
    divEleR.appendChild(divEleRTxt);
    var divEleRAvatar = document.createElement('div');
    divEleRAvatar.className = 'conversation-avatar';
    divEleR.appendChild(divEleRAvatar);
    var oMainRL = document.getElementById('mainRL');
    if (oAvatar.style.backgroundImage === 'url("./a.png")' && oConversation.value) {
      oMainRL.insertBefore(divEleR, oMainRL.getElementsByTagName('div')[0]); // 插入成为第一个子节点
    }

    var divEleL = document.createElement('div');
    divEleL.className = 'main-conversation-l';
    var divEleLAvatar = document.createElement('div');
    divEleLAvatar.className = 'conversation-avatar';
    divEleL.appendChild(divEleLAvatar);
    var divEleLTxt = document.createElement('div');
    divEleLTxt.className = 'conversation-text';
    var eleLText = document.createTextNode(oConversation.value);
    divEleLTxt.appendChild(eleLText);
    divEleL.appendChild(divEleLTxt);
    if (oAvatar.style.backgroundImage === 'url("./b.png")' && oConversation.value) {
      oMainRL.insertBefore(divEleL, oMainRL.getElementsByTagName('div')[0]); // 插入成为第一个子节点
    }
  }

其中用到的知识点主要是JS的DOM操作。