首页 > 代码库 > 每日案例2
每日案例2
<!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{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;} </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=http://www.mamicode.com/=‘‘) { alert(‘请输入值!‘); }else if(onOff){ oCon.innerHTML=‘<div class="le"><p><img class="left" src=http://www.mamicode.com/‘+oImgg.src+‘>oCon.innerHTML; oText.value=‘‘; }else{ oCon.innerHTML=‘<div class="ri"><p><img class="right" src=http://www.mamicode.com/‘+oImgg.src+‘>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="http://www.mamicode.com/发送"/> </div> </div> </div></body></html>
每日案例2
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。