<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>每日案例</title>
<style type="text/css">
*{margin: 0px; padding: 0px;}
p{margin-bottom: 10px;height: 32px;line-height: 33px;}
.iphone5{ 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; 232px;height: 395px;margin: 100px 0px 0px 23px;}
.screen .content{float: left; 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; 130px;word-break:break-all;line-height: 24px;}
.p1{background: #999;color: #fff;padding: 0px 8px;margin-right: 6px; 130px;word-break:break-all;line-height: 24px;}
.le,.ri{margin: 6px 0px;}
.screen .typing{float: left; 232px;height: 36px;background: #ccc;}
.screen .typing .img{float: left; 36px;height: 32px;display: block;margin-top: 2px;}
.screen .typing .text{float: left; 121px;height: 24px;line-height: 24px;margin: 6px;}
.screen .typing .ok{float: left; 50px;height: 28px;margin-top: 5px;background: #6cf;border: 0px;color: #fff;font-weight: bold;}
</style>
<script type="text/javascript">
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){
oCon.innerHTML='<div class="le"><p><img class="left" src='+oImgg.src+'><span class="left p">'+oText.value+'</span></p><div style="clear:both;"></div></div>'+oCon.innerHTML;
oText.value='';
}else{
oCon.innerHTML='<div class="ri"><p><img class="right" src='+oImgg.src+'><span class="right p1">'+oText.value+'</span></p><div style="clear:both;"></div></div>'+oCon.innerHTML;
oText.value='';
}
}
}
</script>
</head>
<body>
<div class="iphone5">
<div class="screen">
<div id="content" class="content">
</div>
<div class="typing">
<img id="imgg" class="img"src="http://m2.img.srcdd.com/farm4/d/2014/0821/14/E5A3ABB33AA87907AE635166335D5A13_B500_900_36_32.jpeg">
<input id="text"class="text" type="text" value=""/>
<input id="ok" class="ok" type="button" value="发送"/>
</div>
</div>
</div>
</body>
</html>
