基于javascript制作微博发布栏效果 下载本文

内容发布更新时间 : 2024/6/16 7:24:02星期一 下面是文章的全部内容请认真阅读。

html PUBLIC \XHTML 1.0 Transitional//EN\\ <html xmlns=\ <head> <style>

#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;} </style>

<meta http-equiv=\ <title></title>

<script type=\ 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='你还可以输入<span>90</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==''||num>90)       {

      oA.className='dis';       }       else       {

       oA.className='';       }     }

    function getLength(str)     {

    returnp; {

        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('发布成功');       }     } }

</script> </head> <body >

<div id='div1'>

 <p>请输入你的留言</p>  <textarea></textarea>

 <a href=\发布</a> </div> </body> </html>

以上就是本文的全部内容,希望对大家的学习有所帮助。