<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>腾讯微博</title><style> *{margin: 0 auto; padding: 0;} html,body{background-color: #3c3a3b;} #msgBox{margin: 0 auto;background:#fff;width: 500px;border-radius: 10px;margin-top: 10px; overflow: hidden;} form{padding: 15px; background:#fff url(img/boxBG.jpg) repeat-x bottom;} form>h2{font-size: 16px;color: rgb(40, 40, 40);padding: 0 0 10px 0;} form .msgTitle>input{height: 22px; border-radius: 5px;float: left;border: 1px solid #d0d0d0;width:160px;padding: 3px 5px;background:#fff url(img/inputBG.png) repeat-x;} form .msgTitle>p{float: left;margin-left: 10px;} form .msgTitle img{display:block;float:left;width: 30px;height: 30px;cursor: pointer;opacity: 0.5;margin-right: 6px;} form #conBox{height: 72px;width: 460px;border-radius: 6px;margin-top: 10px;border:1px solid #d0d0d0;resize: none;overflow: auto;background:#fff url(img/inputBG.png) repeat-x;} form .tr{margin-top: 10px; position: relative;color: #999; overflow: hidden;} form .tr span{font-size: 14px; color: #b6b6b6;} form .tr p{float: right; line-height: 30px;} form #fontCont{font-size: 18px; color: rgb(131, 131, 131);} form #sendBtn{width:112px;height: 30px;cursor: pointer;margin-left: 10px; background: url(img/btn.png) no-repeat; border:0;} /* */ .list{padding: 15px;} li{list-style: none;} .list> h3{background-color: #e4eaec; height: 33px;position: relative;} .list > h3 span{font-size: 14px; background: #fff; color:black; padding: 0px 15px;line-height: 28px;position: absolute;bottom: 0;left: 5px;} .list > ul{overflow: hidden; zoom: 1;} .list a{text-decoration: none;color: #2b4a78;font-size: 14px; float: left;} .list > ul >li{width: 100%;float: left;margin-top: 10px; padding: 10px 0px; border-bottom: 1px dashed #d8d8d8;} .list > ul > li:hover{background-color: #f5f5f5;} .list > ul > li:hover .del{display:block;} .list > ul >li .listImg{float: left; margin-left: 5px;} .list > ul >li .content{float: left; margin-left: 10px; width: 400px; font-size: 14px; word-wrap: break-word;} .list > ul >li .del{float:right; font-size: 12px;color:#889db6; display:none;margin-right: 5px;} .list > ul > li .time{margin-top: 5px;color:#889db6;font-size: 12px;} </style></head><body><div id="msgBox"><form action=""><h2>来，说说你在做什么，想什么</h2><div class="msgTitle"><input id="titInput" type="text"><p id="userHead"><img src="./img/face1.gif" alt=""><img src="./img/face2.gif" alt=""><img src="./img/face3.gif" alt=""><img src="./img/face4.gif" alt=""><img src="./img/face5.gif" alt=""><img src="./img/face6.gif" alt=""><img src="./img/face7.gif" alt=""><img src="./img/face8.gif" alt=""></p></div><div><textarea id="conBox" class="f-text"></textarea></div><div class="tr"><p><span class="countTxt">还能输入<strong id="fontCont">140</strong>个字</span><input id="sendBtn" type="button" value="" title="快捷键 CTRL+Enter"></p></div></form><div class="list"><h3><span>大家在说</span></h3><ul><li><div class="listImg"><img src="./img/face.gif" alt=""></div><div class="content"><div class="userName"><a href="javascript:;">日久生情：</a></div><div class="msgInfo">新增广播功能</div><div class="time"><span>07月05 12:00</span><a class="del" href="javascript:;">删除</a></div></div></li><li><div class="listImg"><img src="./img/face.gif" alt=""></div><div class="content"><div class="userName"><a href="javascript:;">日久生情：</a></div><div class="msgInfo">新增广播功能</div><div class="time"><span>07月05 12:00</span><a class="del" href="javascript:;">删除</a></div></div></li><li><div class="listImg"><img src="./img/face.gif" alt=""></div><div class="content"><div class="userName"><a href="javascript:;">日久生情：</a></div><div class="msgInfo">新增广播功能</div><div class="time"><span>07月05 12:00</span><a class="del" href="javascript:;">删除</a></div></div></li><li><div class="listImg"><img src="./img/face.gif" alt=""></div><div class="content"><div class="userName"><a href="javascript:;">日久生情：</a></div><div class="msgInfo">新增广播功能</div><div class="time"><span>07月05 12:00</span><a class="del" href="javascript:;">删除</a></div></div></li><li><div class="listImg"><img src="./img/face.gif" alt=""></div><div class="content"><div class="userName"><a href="javascript:;">日久生情：</a></div><div class="msgInfo">新增广播功能</div><div class="time"><span>07月05 12:00</span><a class="del" href="javascript:;">删除</a></div></div></li></ul></div></div></body><script> //封装获取元素的函数 window.onload = function(){ var Ext = { getId:function(ele){ return typeof(ele) === 'string' ? document.getElementById(ele):ele; }, getCls:function(ele){ return typeof(ele) === 'string' ? document.getElementsByClassName(ele):ele; }, $:function(ele){ return typeof(ele) === 'string' ? document.querySelectorAll(ele):ele; }, EventUtil:{ // 事件添加删除 addHandler:function(ele,type,handler){ if(ele.addEventListener){ return ele.addEventListener(type,handler,false); }else if(ele.attachEvent){ ele.attachEvent('on'+type,handler); }else{ ele['on'+type] = null; } }, removeHandler:function(ele,type,handler){ if(ele.removeEventListener){ ele.removeEventListener(type,handler,false) }else if(ele.detachEvent){ ele.detachEvent('on'+type,handler); }else{ ele['on'+type] = null; } }, add:function(){ alert('aa') } } } var otitInput = Ext.getId('titInput'), //标题 otxtInput = Ext.getCls('f-text')[0], //输入内容 allImg = Ext.$('#userHead > img'), //头像 sendBtn = Ext.getId('sendBtn'), //发送按钮 fontCont = parseInt(Ext.getId('fontCont').innerHTML); //输入字数 //事件绑定，判断字符输入 Ext.EventUtil.addHandler(otxtInput,onclick,function(){alert('aa')}); Ext.EventUtil.addHandler(sendBtn,onclick,function(){alert('aa')}); }</script></html>
添加回答
举报
0/150
提交
取消