JavaScript制作微博发布栏效果

xiaoxiao2021-02-28  98

知识点包括以下:

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 >

转载请注明原文地址: https://www.6miu.com/read-40070.html

最新回复(0)