js小案例，模拟QQ聊天

点击人物图片可切换，输入内容可发送

效果图：

页面布局：

<div id="box"></div>
<img src="img/xiaohong.jpg" alt="" id="img" />
<span id="username">小红</span>
<input type="text" id="text" />
<input type="button" id="btn" value="发送" />

页面样式：

#box {
        width: 400px;
        min-height: 400px;
        border: 1px solid black;
      }
      img {
        width: 30px;
        height: 30px;
        vertical-align: middle;
      }

js交互

<script>
      var oBox = document.getElementById("box"),
        oContent = document.getElementById("content"),
        oSmbox = document.getElementById('smbox'),
        oBtn = document.getElementById("btn"),
        oimg = document.getElementById("img"),
        oText = document.getElementById("text"),
        oUser = document.getElementById("user"),
        oUserName = document.getElementById("username");
      var arr = ["小明", "小红"];
      var aimg = ["img/xiaohong.jpg", "img/xiaomin.jpg"];
      var num = 0;

      oUserName.onclick = function() {
        if (num == 0) {
          oUserName.innerHTML = arr[0];
          oimg.src = aimg[1];
          num = 1;
        } else {
          oUserName.innerHTML = arr[1];
          oimg.src = aimg[0];
          num = 0;
        }
      };

      oBtn.onclick = function() {
          if(oUserName.innerHTML == arr[0]){
            oBox.innerHTML += '<p><img src="img/xiaomin.jpg">:'+ oText.value+'</p>';
          }else{
            oBox.innerHTML += '<p style="text-align:right">'+ oText.value+':<img src="img/xiaohong.jpg"></p>';
          }
       
        /* if (oUserName.innerHTML == arr[0]) {
          console.log(oUserName.innerHTML == arr[0]);
          oUser.src = aimg[1];
        }else{
            oUser.src = aimg[0];
        } */
        // oContent.innerHTML ='<img src="img/xiaomin.jpg">'+ oText.value;


        var a={n:1};
        var b=a;
        a.x=a={n:2};
        console.log(a.x);
        console.log(b)
      };
    </script>