网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 基于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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <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="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='你还可以输入<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)
        {
        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('发布成功');
          }
        }
    }
    </script>
    </head>
    <body >
    <div id='div1'>
     <p>请输入你的留言</p>
     <textarea></textarea>
     <a href="#">发布</a>
    </div>
    </body>
    </html>
    以上就是本文的全部内容，希望对大家的学习有所帮助。
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/20 8:59:30