html仿短信聊天,前端开发JS模仿手机短信发送

/p>

<

无标题文档

* {margin:0px; padding:0px;}

p{margin-bottom:10px; height:32px; line-height:33px;}

.iphone5 {

width:411px; height:579px; background:url(http://m3.img.srcdd.com/farm4/d/2014/0821/15/54FE91F94A647A91FC8B9A84FEE86678_B1280_1280_411_579.png) no-repeat; margin:80px auto 0px;

}

.screen {

float:left; width:232px; height:395px; margin:100px 0px 0px 23px;

}

.screen .content {float:left; width:212px; height:339px; overflow-x:hidden; padding:10px;}

.left {float:left;}

.right {float: right;}

.p{background:red; color:#fff; padding:0px 8px; margin-left:6px; width: 130px; word-break: break-all; line-height:24px;}

.p1{background:#999; color:#FFF; padding:0px 8px; margin-right:6px;width: 130px; word-break: break-all; line-height:24px}

.le,.ri {margin: 6px 0px;}

.screen .typing {float:left; width:232px; height:36px; background:#CCC;}

.screen .typing .img {float:left; width:36px; height:32px; display:block; margin-top:2px;}

.screen .typing .text {float:left; width:121px; height:24px; line-height:24px; margin:6px;}

.screen .typing .ok {float:left; width:50px; height:28px; margin-top:5px; background:#6CF; border:0px; color:#FFF; font-weight:bold;}

window.onload = function () {

var oOk = document.getElementById(‘ok’);

var oText = document.getElementById(‘text’);

var oCon = document.getElementById(‘content’);

var oIright = document.getElementById(‘lright’);

var oShut = document.getElementById(‘shut’);

var oScreen = document.getElementById(‘screen’);

var oImgg = document.getElementById(‘imgg’);

var onOff = true;

oImgg.onclick = function () {

if (onOff) {

oImgg.src = ‘http://m3.img.srcdd.com/farm4/d/2014/0821/14/2EB552E33DB031D0F03BB9A0488BBE64_B1280_1280_36_32.jpeg’;

onOff = false;

} else {

oImgg.src = ‘http://m2.img.srcdd.com/farm4/d/2014/0821/14/E5A3ABB33AA87907AE635166335D5A13_B500_900_36_32.jpeg’;

onOff = true;

}

}

oOk.onclick = function () {

if (oText.value == ”) {

alert(‘你是猴子请来的逗比吗？’);

} else if (onOff == true) {

oCon.innerHTML = ‘

’ + oText.value + ‘

’ + oCon.innerHTML;

oText.value = ”;

} else {

oCon.innerHTML = ‘

’ + oText.value + ‘

’ + oCon.innerHTML;

oText.value = ”;

}

}

}