关于微博发布栏的制作总结
今天做了个微博发布栏的效果，涉及到的知识点包括以下：
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>
