js模拟手机短信对话

来源：互联网发布：黑魂3男捏脸数据编辑：程序博客网时间：2024/05/30 04:41

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 = '';}                }            }        }

阅读全文

1 0