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="發(fā)布" 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('字?jǐn)?shù)太多,無法發(fā)布'); }else if (m<5){ alert('字?jǐn)?shù)太少了,多寫點吧') }else{ alert('發(fā)布成功'); } } } </script>
Correcting teacher:韋小寶Correction time:2018-12-25 09:27:44
Teacher's summary:這里主要就是開始js代碼來完成實際的小功能了!還是挺有意思的!