关于微博发布栏的制作总结

今天做了个微博发布栏的效果，涉及到的知识点包括以下：

1.判断IE的方法：直接用 var ie=!-[1,];即可

2.连续发生事件的用法：

IE下：触发对象.onpropertychange

标准下：触发对象.oninput

3.焦点聚集和移开事件。onfocus和onblur

4.判断单字节（0-255之间）与双子节：正则表达式:/[^x00-xff]/g

代码如上：

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <style>
  5 #div1{width: 400px;margin: 20px auto;border: 1px solid #ccc}
  6 #div1 p{float: right;margin: 0;font-size: 13px;}
  7 #div1 textarea{width: 400px;height: 280px;}
  8 #div1 a{background: #ccc;float: right;color: #FFFFFF;text-align: center;background: #00FF00;width: 50px;height: 30px}
  9 #div1 a.dis{background: #ccc;color: black;}
 10 </style>
 11 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 12 <title></title>
 13 <script type="text/javascript">
 14 window.onload=function ()
 15 {
 16        var oDiv=document.getElementById('div1');
 17        var oP=oDiv.getElementsByTagName('p')[0];
 18        var oT=oDiv.getElementsByTagName('textarea')[0];
 19        var oA=oDiv.getElementsByTagName('a')[0];
 20        var bool=true;
 21        var ie=!-[1,];
 22        var timer=null;
 23        var num=0;
 24        //给文本框加聚焦事件
 25        oT.onfocus=function()
 26        {
 27          if(bool)
 28          {
 29             oP.innerHTML='你还可以输入<span>90</span>字';
 30             bool=false;
 31          } 
 32 
 33        }
 34          oT.onblur=function()
 35        {
 36          if(oT.value=='')
 37          {
 38             oP.innerHTML='请输入你的留言';
 39             bool=true;
 40          } 
 41 
 42        }
 43        //输入内容，计算字数
 44        if(ie)
 45        {
 46           oT.onpropertychange=toChange;//连续触发
 47        }
 48        else
 49        {
 50         oT.oninput=toChange;
 51        }
 52        function  toChange()
 53        {
 54              var  num=Math.ceil(getLength(oT.value)/2);//向上取整
 55              var oSpan=oDiv.getElementsByTagName('span')[0];
 56              if(num<=90)
 57              {
 58                 oSpan.innerHTML=90-num;
 59                 oSpan.style.color='';
 60              }
 61            else
 62            {
 63                 oSpan.innerHTML=num-90;
 64                 oSpan.style.color='red';
 65            }
 66            if(oT.value==''||num>90)
 67            {
 68             oA.className='dis';
 69            }
 70            else
 71            {
 72              oA.className='';
 73            }
 74 
 75        }
 76        function  getLength(str)
 77        {
 78         return  String(str).replace(/[^x00-xff]/,'aa').length;//不是单双节的将其变为两个单双节的
 79        }
 80        //点击按钮，变色
 81        oA.onclick=function()
 82        {
 83             if(this.className=='dis')
 84             {
 85                 clearInterval(timer);
 86                 timer=setInterval(function(){
 87                     if(num>5){clearInterval(timer);num=0;}
 88                     else{
 89                         num++;
 90                     }
 91                     if(num%2)
 92                     {
 93                         oT.style.background='red';
 94                     }
 95                     else
 96                     {
 97                          oT.style.background='';
 98                     }
 99 
100                 },100)
101             }
102             else
103             {
104                 alert('发布成功');
105             }
106        }
107        
108 }
109 </script>
110 </head>
111 <body >
112 <div id='div1'>
113   <p>请输入你的留言</p>
114   <textarea></textarea>
115   <a href="#" class="dis">发布</a>
116 </div>
117  
118  
119 </body>
120 </html>