资源描述
基于javascript制作微博发布栏效果_ 本文为大家分享了做微博发布栏效果的过程,涉及到的学问点包括以下: 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 l1/DTD/xhtml1-transitional.dtd html xmlns=l head style #div1width: 400px;margin: 20px auto;border: 1px solid #ccc #div1 pfloat: right;margin: 0;font-size: 13px; #div1 textareawidth: 400px;height: 280px; #div1 abackground: #ccc;float: right;color: #FFFFFF;text-align: center;background: #00FF00;width: 50px;height: 30px #div1 a.disbackground: #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=你还可以输入span90/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=|num90) 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(num5)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 以上就是本文的全部内容,盼望对大家的学习有所关心。 .
展开阅读全文