<style type="text/css">
*{ margin:0px auto; padding:0px}
#wai{ width:200px; height:10px; border:1px solid #60F;}
#nei{ width:0px; height:10px; background-color:#F33; float:left}
</style>

<div style="width:600px; height:300px; margin-top:30px">

　　　　 <div id="wai">      

　　　　　　<div id="nei">                 

　　　　　　</div>    

　　　　</div>

　　<input type="button" value="http://www.mamicode.com/开始" onclick="Start()" />

</div>

<script type="text/javascript">

function Start()

{  

　　Bian();

　　}

　　var bfb = 0; function Bian()

　　{　　  

　　//将百分比变化

 　　bfb= bfb+1;    

　　//改变宽度  

　　document.getElementById("nei").style.width = bfb+"%";  

 　　//判断  

　　if(bfb<100)

 　　{   

　　window.setTimeout("Bian()",50);  

　　}  

}

</script>

例子：进度条制作