今天做了個微博發佈欄的效果，涉及到的知識點包括以下： 1.判斷IE的方法：直接用 var ie=!-[1,];即可 2.連續發生事件的用法： IE下：觸發對象.onpropertychange 標準下：觸發對象.oninput 3.焦點聚集和移開事件。onfocus和onblur 4.判斷單位元組（0
今天做了個微博發佈欄的效果，涉及到的知識點包括以下：
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>
