六.进度条
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{
margin:auto
}
#kuang{
height:30px;
border:2px solid #999}
#tiao{
height:30px;
background-color:red;
float:left}
</style>
</head>
<body>
<div id="kuang" style="width:600px;">
<div id="tiao" style="width:0px;"></div>
</div>
<input type="button" value="前进" onclick="Qian()"/>
<input type="button" value="后退" onclick="Hou()"/>
</body>
<script type="text/javascript">
var x; //定义变量x
var y;
function Qian()
{
x=window.setInterval("Jindu()",1); //将间隔操作赋值给变量x
window.clearInterval(y); //清除间隔变量y，在这可理解为当执行y操作时再执行x操作可以终止y操作
}
function Jindu()
{
var kuang=document.getElementById("kuang");
var tiao=document.getElementById("tiao");
var kc=parseInt(kuang.style.width); //将获取到的样式取整后赋值给变量kc
var tc=parseInt(tiao.style.width);
if(tc>=kc) //条件判断
{
window.clearInterval(x); //清除间隔变量x，此时x已存有间隔操作
return; //条件符合的话用return终止函数向下执行。
}
tc=tc+2; //将宽度样式累加
tiao.style.width=tc+"px";
}
function Hou()
{
y=window.setInterval("Houtui()",1);
window.clearInterval(x);
}
function Houtui()
{
var kuang=document.getElementById("kuang");
var tiao=document.getElementById("tiao");
var kc=parseInt(kuang.style.width);
var tc=parseInt(tiao.style.width);
if(tc<=0)
{
window.clearInterval(y);
return;
}
tc=tc-2;
tiao.style.width=tc+"px";
}
</script>
</html>
原文：https://www.cnblogs.com/wyc1991/p/8750219.html