学习笔记之进度条、新闻公告切换、长方形点击变宽

进度条：

style：

{margin:0px auto; padding:0px;}
    #t1{
        500px;
        height:20px;
        border:1px solid #000;
        }    
    #t2{
        float:left;
        height:20px;
        background-color:#FF0;
        }

body：

<div id="t1">
    <div id="t2" style="0px;"></div>   <!--如果下面引用了宽，则必须内联-->
   </div>

script:

window.setInterval("Jin()",20);
    function Jin()
    {    
        var t2=document.getElementById("t2");//不用获取t1的id，是因为用不到啊~~~！
        var t3=t2.style.width;                 //要定义一下获得的宽，然后用截取字符串的符号截取一下，然后在小于外面宽的宽度的前提下，先强转一下值，再让他每次增加一个数（即表面的进度），再拼起来px。
        var t4=t3.substr(0,t3.length-2);
        if(t4<500)
        {
            t4=parseInt(t4)+2;
            t2.style.width=t4+"px";
        }
    }

新闻公告切换：

style：

*{margin:0px auto; padding:0px;}
        #g1{ 200px;
             height:35px;}
        .g2{ 100px; 
             height:35px;
             float:left;
             text-align:center;
             vertical-align:middle;    /*不要边框，直接用背景色更好一点 */
             line-height:35px; 
            }
        #g2{ background-color:#FF3;}
        #g3{ background-color:#9FF;}
        #g22{
            200px;
            height:180px;
            background-color:#FF3;
            }
        #g33{
            200px;
            height:180px;
            background-color:#9FF;
            display:none;
            }
            

body：例.三个div

   <div id="g1">
       <div class="g2" id="g2" onclick="Gg('g22')">公告</div>
       <div class="g2" id="g3" onclick="Gg('g33')">新闻</div>
   </div>
   <div id="g22" class="g3"></div>
   <div id="g33" class="g3"></div>

script:

function Gg(a)
    {
        var b=document.getElementById(a);
        var c=document.getElementsByClassName("g3");
        for(i=0;i<c.length;i++)
        {
            c[i].style.display="none";
        }
        b.style.display="block";
    }

点击按钮，一个大方框整体向右加宽。

style：

*{margin:0px auto; padding:0px;}
        #w1{
            100%;
            height:500px;
            float:left;}    
        #w2{
            height:500px;
            float:left;
            background-color:#CF9;}
        #w3{
            height:500px;
            float:left;
            background-color:#6F6;
            }
        #w4{
            40px;
            height:40px;
            background-color:#606;
            position:absolute;
            top:220px;
            
            }

body:

<div id="w1">
           <div id="w2" style="100px;"></div>
        <div id="w3" style="600px;"></div>
   </div>
   <div id="w4" onclick="Ww()" style="left:80px;"></div>  

script:

function Ww()
    {
        var q=window.setInterval("Qw()",20);    //一定要加双引号，间隔的拼音要打对！！！
    }
     function Qw()//所有要用到的样式，全部都要内联；
    {
        var w2=document.getElementById("w2");
        var r1=w2.style.width;
        if(parseInt(r1.substr(0,r1.length-2))>600)
        {
            window.clearInterval(q);
            //return;
           
            }
        var r11=parseInt(r1.substr(0,r1.length-2))+2;
        w2.style.width=r11+"px";
        
        
        var w3=document.getElementById("w3");
        var r3=w3.style.width;
        var r33=parseInt(r3.substr(0,r3.length-2))-2;
        w3.style.width=r33+"px";
        
        
        var w4=document.getElementById("w4");
        var r4=w4.style.left;
        var r44=parseInt(r4.substr(0,r4.length-2))+2;
        w4.style.left=r44+"px";     //这里不再与上面一样是宽增加，而是变为距离左边缘的距离。
        
        
    }