abstract: <style type="text/css"> .header { height: 250px; width: 900px; border: 1px solid black; margin: 0px auto; padding:
<style type="text/css"> .header { height: 250px; width: 900px; border: 1px solid black; margin: 0px auto; padding: 10px; } img { width: 290px; height: 50px; float: left; } .header_sr { height: 50px; width: 100px; float: right; line-height: 50px; } #text { height: 150px; width: 850px; margin-left: 20px; border: 3px solid #CCCCCC; margin-top: 5px; } .header #sp1, #sp2, #sp3, #sp4, #sp5, #sp6 { float: left; width: 50px; height: 30px; line-height: 30px; padding-left: 20px; } .header #sp1 { background: url(img/bq.png) no-repeat left center; } .header #sp2 { background: url(img/tp.png) no-repeat left center; } .header #sp3 { background: url(img/sp.png) no-repeat left center; } .header #sp4 { background: url(img/ht.png) no-repeat left center; } .header #sp5 { background: url(img/tt.png) no-repeat left center; } .header #sp6 { margin-left: 300px; height: 30px; width: 500; } #bt { float: right; margin: 0px 10px; height: 30px; width: 100px; background: #FF8140; border: none; color: #FFFFFF; border-radius: 70px; } </style>
<div class="header"> <img src="img/logo.png"> <div class="header_sr">已输入<span id="number"></span>字</div> <textarea id="text"></textarea> <span id="sp1">表情</span> <span id="sp2">图片</span> <span id="sp3">视频</span> <span id="sp4">话题</span> <span id="sp5">头条</span> <span id="sp6">公开</span> <input type="button" value="发布" id="bt" /> </div>
<script type="text/javascript"> window.onload=function(){ var number,text,m number=document.getElementById('number'); text=document.getElementById('text'); bt=document.getElementById('bt'); text.onkeyup=function a(){ m=text.value.length; number.innerHTML=m; if(m>140){ number.style.color="red" }else( number.style.color="black" ); }; bt.onclick=function(){ if(m>140){ alert('字数太多,无法发布'); }else if (m<5){ alert('字数太少了,多写点吧') }else{ alert('发布成功'); } } } </script>
Correcting teacher:韦小宝Correction time:2018-12-25 09:27:44
Teacher's summary:这里主要就是开始js代码来完成实际的小功能了!还是挺有意思的!