你的位置:首页 > Java教程

[Java教程]关于微博发布栏的制作总结

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

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 ="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       else103       {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>