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

2019-11-20 10:17:52

字体：大中小

来源：转载

供稿：网友

本文为大家分享了做微博发布栏效果的过程，涉及到的知识点包括以下：

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>

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

上一篇：javascript事件委托的用法及其好处简析

下一篇：纯js+html和纯css+html制作手风琴效果