abstract:<!DOCTYPE html><html><head><meta charset="UTF-8"><title>weibo</title><style>*{font-size: 14px;color: #ccc;}.box{width: 620px;height: 180px;border: 5
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>weibo</title> <style> *{ font-size: 14px; color: #ccc; } .box{ width: 620px; height: 180px; border: 5px solid pink; margin:30px auto; background: url(images/body_bg.jpg) no-repeat; } img{ float: left; margin-top:5px; margin-left:5px; } .box1{ float: right; margin-right:20px; margin-top:5px; } .box2 span{ width: 30px; height: 32px; line-height: 32px; float: left; padding-left: 30px; margin-left: 10px; } #text{ width: 600px; height: 110px; margin-left: 6px; background:transparent;/*文本域背景透明*/ } #sp1{ background: url(images/an5.png) left center no-repeat; } #sp2{ background: url(images/an4.png) left center no-repeat; /* width: 30px; height: 32px; line-height: 32px; float: left; padding-left: 30px;*/ } #sp3{ background: url(images/an3.png) left center no-repeat; } #sp4{ background: url(images/an2.png) left center no-repeat; } #sp5{ background: url(images/an1.png) left center no-repeat; width: 50px; } #sp1 img{ } .box2{ margin-left:10px; } .box2 input{ width: 65px; height: 26px; float: right; margin-right: 25px; background-color: red; border: none; color: green; } /*#text{ margin-top: 5px; }*/ </style> <script> var txt,number,zi window.onload=function(){ txt=document.getElementById('text') //获取id number=document.getElementById('inp')//获取id txt.onkeyup=function t(){ zi=140-txt.value.length//140为限制字数,减去文本框内输入的文字为实际输入文字 if(zi<0){ number.style.color="red"//<0 意味着超出140的限制 }else{ number.style.color="#ccc" } number.innerHTML=zi; } fb.onclick=function(){ if(m=140){ alert("请输入微博内容") txt.focus()//弹出警告框后,焦距到文字框中,默认弹出后不会跳到文字框中 }else if(m<0){ alert("字数超过限制,请重新修改") txt.focus() }else{ alert("发布成功") } } // t() } </script> </head> <body> <div> <img src="images/12.png" alt=""> <div>还可以输入<span id="inp"></span>zi</div> <textarea name="" id="text"></textarea> <div> <span id="sp1">表情</span> <span id="sp2">图片</span> <span id="sp3">视频</span> <span id="sp4">话题</span> <span id="sp5">长微博</span> <input type="button" value="submit" id="fb"> </div> </div> </body> </html>