进度条
今天做了个进度条的小demo。
其中,变量f的作用是:让setTimeout函数多执行一遍。 为什么呢,因为clearTimeout函数把最后一次的setTimeout函数动作cut了
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!--<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>--> <STYLE type=text/css> * { padding: 0; margin: 0; } #my_background { width: 200px; background: #fff; border: solid 1px #000; color: #000; } #progress { background: lightcyan; display: block; text-align: center; height: 20px; } #pro_num { text-align: center; position: absolute; top: 0; z-index: 100; width: 200px; } </STYLE> <script type="text/javascript"> </script> </head> <body> <div id="my_background"> <div id="progress"></div> <div id="pro_num">10%</div> </div> </body> <script type="text/javascript"> var pro_num = document.getElementById("pro_num"); var progress = document.getElementById("progress"); var f; function progressTest(n) { progress.style.width = n * 2 + "px"; pro_num.firstChild.nodeValue = n + "%"; n += 11; if(n>100){ n = 100; } t = setTimeout("progressTest(" + n + ")", 100); f = f-11; if (f > 100) { clearTimeout(t); } } progressTest(1); </script> </html>