1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 #progress{
8 width: 5px;
9 height: 10px;
10 background: #008000;
11 }
12 </style>
13 </head>
14 <body>
15 <div id="progress"></div>
16
17 <script>
18 var box = document.getElementById("progress");
19 box.style.width = "100px";
20 var i = 0;
21 var timer = 0;
22 //定时器 递归函数
23 function F(){
24 i +=10;
25 box.style.width = i+"px";
26 if(i>500){
27 clearInterval(timer);
28 }
29 }
30 timer = setInterval(F,100);//不停加
31 </script>
32 </body>
33 </html>
