JS实例2
进度条
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{
margin:0px auto;
padding:0px;
}
#a{
width:500px;
height:30px;
}
#b{
height:30px;
background-color:#0F0;
float:left;
}
</style>
</head>
<body>
<div id="a">
<div id="b" style="width: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{
width:100%;
height:500px;
}
#nei_1{
height:500px;
background-color:blue;
float:left;
}
#nei_2{
height:500px;
background-color:#6C0;
float:left;
}
#anniu{
width:50px;
height:50px;
background-color:red;
position:absolute;
top:225px;
}
</style>
</head>
<body>
<div id="wai">
<div id="nei_1" style="width:200px;" onclick="Hua()"></div>
<div id="nei_2" style="width: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>
这样就可以循环来回点击变大变小
