js模拟手机短信对话

html部分：

<h2>在下面可以输入要说的话哦~~~</h2>
<div id="win">
    <div id="content"></div>
    <ul>
        <li id="people"><img src=""/></li>
        <li id="text">
            <input type="text" value="" placeholder="请输入对话内容~"/>
        </li>
        <li id="send">发送</li>
    </ul>
</div>

css部分：

h2,ul,img{
            margin: 0;
            padding: 0;}
        li{
            list-style: none;}
        h2{
            height: 30px;
            line-height: 30px;
            font-size: 20px;
            color: #971b2b;}
        body{
            text-align: center;}
        #win{
            width: 240px;
            height: 420px;
            position: relative;
            margin: 20px auto;
            border:1px solid #000000;}
        #content{
            width: 240px;
            height: 380px;
            border-bottom:1px solid #000000;
            overflow:scroll;}
        ul{
            width: 240px;
            height: 40px;
            position: relative;}
        ul li{
            float: left;
            position: absolute;}
        #people{
            width:  23px;
            height: 23px;
            border: 1px solid #888888;
            padding: 4.5px;
            left: 3px;
            top: 3px;
            cursor: pointer;}
        #text{
            width: 120px;
            height: 26px;
            line-height: 26px;
            text-align: left;
            padding: 2px;
            top: 2px;
            left: 45px;}
        #text input{width: 120px;
            height: 26px;
            overflow: scroll;
            word-wrap:break-word;}
        #send{
            height: 30px;
            width: 50px;
            line-height: 30px;
            text-align: center;
            top: 4px;
            right: 3px;
            border: 1px solid #888888;
            cursor: pointer;}
        #send:hover{
            background: #c2c2c2;
            color: #ffffff;}
        #content p {
            margin: 2px;
        }
        #content span {
            font-size: 14px;
            display: inline-block;
            padding: 5px;
            border: 1px solid gray;
            border-radius: 5px;
            margin: 3px;
            max-width: 160px;
            vertical-align: bottom;
            word-wrap: break-word;
        }
        #content img {
            height: 24px;
            width: 24px;
            border: 1px solid gray;
            border-radius: 5px;
            padding: 2px;
            margin: 3px;
            vertical-align: top;
        }

JavaScript部分：

 window.onload = function () {
            var oContent = document.getElementById('content');
            var oText = document.getElementsByTagName('input')[0];
            var oSend = document.getElementById('send');
            var oPeople = document.getElementById('people');
            var oImg = oPeople.getElementsByTagName('img')[0];
            var onOff = true;
            var str = '';

            //初始化
            oImg.src = "img/星星.png";

            //点击切换头像
            oPeople.onclick = function() {
                if (onOff){
                    oImg.src = "img/球球.png";
                }else{
                    oImg.src = "img/星星.png";}
                onOff = !onOff;
            };

            //点击发送内容
            oSend.onclick = function () {
                if (oText.value == ''){
                    alert('请输入些内容吧~');
                }else{
                    if (onOff){
                        str += '<p>' + oPeople.innerHTML + '<span>' + oText.value + '</span><p>';
                        oContent.innerHTML += '<p style="text-align: right"><span style="background: #eee">' + oText.value + '</span>' + '<img src="img/星星.png">' + '</p>';
                        oText.value = '';
                    }else{
                        oContent.innerHTML += '<p style="text-align: left">' + '<img src="img/球球.png">' + '<span style="background: #36ff07">' + oText.value + '</span></p>';
                        oText.value = '';}
                }

            }

        }