首页 >

基于javascript制作微博发布栏效果【javascript】

Posted on | by liu
web前端|js教程基于javascript制作微博发布栏效果【javascript】
javascript制作微博发布栏,javascript微博发布栏
web前端-js教程
本文为大家分享了做微博发布栏效果的过程，涉及到的知识点包括以下：
在线影视php源码,ubuntu关闭端口占用,网络爬虫需要流量,铜陵php培训,建阳网页seolzw
1.判断IE的方法：直接用 var ie=!-[1,];即可
bat源码,ubuntu美化消耗内存,爬虫软件 性能要求,php regex,郑州主词seolzw
2.连续发生事件的用法：
php报修系统源码下载,ubuntu 无法正常重启,外贸客户搜索爬虫,cms 图文 PHP,兴仁seo优化lzw
IE下：触发对象.onpropertychange

标准下：触发对象.oninput

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

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

代码如上：

#div1{width: 400px;margin: 20px auto;border: 1px solid #ccc}#div1 p{float: right;margin: 0;font-size: 13px;}#div1 textarea{width: 400px;height: 280px;}#div1 a{background: #ccc;float: right;color: #FFFFFF;text-align: center;background: #00FF00;width: 50px;height: 30px}#div1 a.dis{background: #ccc;color: black;}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='你还可以输入90字';      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(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(num>5){clearInterval(timer);num=0;}          else{            num++;          }          if(num%2)          {            oT.style.background='red';          }          else          {             oT.style.background='';          }        },100)      }      else      {        alert('发布成功');      }    }    }
 
请输入你的留言
  发布
 
  • 暂无相关文章