基于javascript制作微博发布栏效果

本文为大家分享了做微博发布栏效果的过程，涉及到的知识点包括以下：
1.判断IE的方法：直接用 var ie=！-[1,];即可
2.连续发生事件的用法：
IE下：触发对象.onpropertychange
标准下：触发对象.oninput
3.焦点聚集和移开事件。onfocus和onblur
4.判断单字节（0-255之间）与双子节：正则表达式:/[^x00-xff]/g
代码如上：

<！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><style>#div1{width: 400px;margin: 20px auto;border: 1px solid #ccc}#div1 p{float: right;margin: 0;font-size: 13px;}#div1 textarea{width: 400px;height: 280px;}#div1 a{background: #ccc;float: right;color: #FFFFFF;text-align: center;background: #00FF00;width: 50px;height: 30px}#div1 a.dis{background: #ccc;color: black;}</style><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script type="text/javascript">window.onload=function （）{var oDiv=document.getElementById（"div1"）;var oP=oDiv.getElementsByTagName（"p"）[0];var oT=oDiv.getElementsByTagName（"textarea"）[0];var oA=oDiv.getElementsByTagName（"a"）[0];var bool=true;var ie=！-[1,];var timer=null;var num=0;//给文本框加聚焦事件oT.onfocus=function（）{ if（bool） {oP.innerHTML="你还可以输入<span>90</span>字";bool=false; } } oT.onblur=function（）{ if（oT.value==""） {oP.innerHTML="请输入你的留言";bool=true; } }//输入内容，计算字数if（ie）{ oT.onpropertychange=toChange;//连续触发}else{oT.oninput=toChange;}function toChange（）{ var num=Math.ceil（getLength（oT.value）/2）;//向上取整 var oSpan=oDiv.getElementsByTagName（"span"）[0]; if（num<=90） {oSpan.innerHTML=90-num;oSpan.style.color=""; }else{oSpan.innerHTML=num-90;oSpan.style.color="red";}if（oT.value==""||num>90）{oA.className="dis";}else{ oA.className="";}}function getLength（str）{return String（str）.replace（/[^x00-xff]/,"aa"）.length;//不是单双节的将其变为两个单双节的}//点击按钮，变色oA.onclick=function（）{if（this.className=="dis"）{clearInterval（timer）;timer=setInterval（function（）{if（num>5）{clearInterval（timer）;num=0;}else{num++;}if（num%2）{oT.style.background="red";}else{ oT.style.background="";}},100）}else{alert（"发布成功"）;}}}</script></head><body ><div id="div1"> <p>请输入你的留言</p> <textarea></textarea> <a href="#" class="dis">发布</a></div></body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助。