进度条
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> *{ margin:0px auto; padding:0px; } #a{ 500px; height:30px; } #b{ height:30px; background-color:#0F0; float:left; } </style> </head> <body> <div id="a"> <div id="b" style="0px;"></div> </div> </body> <script type="text/javascript"> window.setInterval("Pao()",20) function Pao()//Pao()是随便设置可以是任何字母只要不重名 { var b=document.getElementById("b");//找到b的内容用变量调用 var c=b.style.width;//获取b的样式属性width,这样字符串c=(0,p,x) var d=c.substr(0,c.length-2);//substr是截取字符串;截取字符串中的0去掉px(索引值第一位,字符串长度-2) if(d<500)//div总宽度为500px { d=parseInt(d)+2//把d强制穿换成整数类型然后加2(可以是加任何整数)然后在把值还给d,这样d就hi一直加2循环 b.style.width=d+"px"//b的宽度为2+2循环下去 } } </script>
点击让左右大小变化(布局)
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> *{ margin:0px auto; padding:0px; } #wai{ 100%; height:500px; } #nei_1{ height:500px; background-color:blue; float:left; } #nei_2{ height:500px; background-color:#6C0; float:left; } #anniu{ 50px; height:50px; background-color:red; position:absolute; top:225px; } </style> </head> <body> <div id="wai"> <div id="nei_1" style="200px;" onclick="Hua()"></div> <div id="nei_2" style="700px;" onclick="Hui()"></div> </div> <div id="anniu" onclick="Hua()" style="left:175px;"></div> </body>
点击中间的红色框让蓝变大绿变小对红色加点击事件
如果蓝色变大相应的绿色变小,红色左边距变大,给他们三个都要定一个变量,
<script type="text/javascript"> //蓝色的长度变大 //绿色的长度变小 //红色框的位置 var id; function Hua() { id = window.setInterval("Dong()",20); } //每一次调用一次,改变的样式 function Dong() { //获取蓝色的元素 var left = document.getElementById("nei_1"); //获取蓝色的宽度 var lw = left.style.width; //判断宽度是否超出 if(parseInt(lw.substr(0,lw.length-2))>700) { window.clearInterval(id); return; } //获取数字加2 lw = parseInt(lw.substr(0,lw.length-2))+2; //修改样式 left.style.width = lw+"px"; //绿色的修改 var right = document.getElementById("nei_2"); var rw = right.style.width; rw = parseInt(rw.substr(0,rw.length-2))-2; right.style.width = rw+"px"; //红色的修改 var an = document.getElementById("anniu"); var al = an.style.left; al = parseInt(al.substr(0,al.length-2))+2; an.style.left = al+"px"; }
点击绿色再让绿色变大蓝色变小
var ad; function Hui() { ad = window.setInterval("Lai()",20); } function Lai() { //绿色的修改 var right = document.getElementById("nei_2"); var rw = right.style.width; if(parseInt(rw.substr(0,rw.length-2))>700) { window.clearInterval(ad); return; } rw = parseInt(rw.substr(0,rw.length-2))+2; right.style.width = rw+"px"; //红色的修改 var an = document.getElementById("anniu"); var al = an.style.left; al = parseInt(al.substr(0,al.length-2))-2; an.style.left = al+"px"; //获取蓝色的元素 var left = document.getElementById("nei_1"); //获取蓝色的宽度 var lw = left.style.width; lw = parseInt(lw.substr(0,lw.length-2))-2; left.style.width = lw+"px"; } </script>
这样就可以循环来回点击变大变小