学习笔记之进度条、新闻公告切换、长方形点击变宽
进度条:
style:
{margin:0px auto; padding:0px;} #t1{ width:500px; height:20px; border:1px solid #000; } #t2{ float:left; height:20px; background-color:#FF0; }
body:
<div id="t1"> <div id="t2" style="width: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{ width:200px; height:35px;} .g2{ width:100px; height:35px; float:left; text-align:center; vertical-align:middle; /*不要边框,直接用背景色更好一点 */ line-height:35px; } #g2{ background-color:#FF3;} #g3{ background-color:#9FF;} #g22{ width:200px; height:180px; background-color:#FF3; } #g33{ width: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{ width:100%; height:500px; float:left;} #w2{ height:500px; float:left; background-color:#CF9;} #w3{ height:500px; float:left; background-color:#6F6; } #w4{ width:40px; height:40px; background-color:#606; position:absolute; top:220px; }
body:
<div id="w1"> <div id="w2" style="width:100px;"></div> <div id="w3" style="width: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"; //这里不再与上面一样是宽增加,而是变为距离左边缘的距离。 }