首页 > 网络编程 > JavaScript > javascript技巧 > js 进度条 js 进度条实现代码 2009-05-17 01:03:01 作者： 非常简洁的进度条实现代码，一般用于一些比较耗时间的操作。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>进度条</title> <style type="text/css"> body{ text-align:center; } .graph{ width:450px; border:1px solid #F8B3D0; height:25px; } #bar{ display:block; background:#FFE7F4; float:left; height:100%; text-align:center; } #barNum{ position:absolute; } </style> <script type="text/javascript"> function $(obj){ return document.getElementById(obj); } function go(){ $("bar").style.width = parseInt($("bar").style.width) + 1 + "%"; $("bar").innerHTML = $("bar").style.width; if($("bar").style.width == "100%"){ window.clearInterval(bar); } } var bar = window.setInterval("go()",50); window.onload = function(){ bar; } </script> </head> <body> <div class="graph"> <strong id="bar" style="width:1%;"></strong> </div> </body> </html> [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 您可能感兴趣的文章:javascript 进度条的几种方法js实现进度条的方法JavaScript实现网页加载进度条代码超简单JS 进度条效果实现代码整理JS实现环形进度条（从0到100%）效果Javascript jquery css 写的简单进度条控件用CSS+JS实现的进度条效果效果js实现音频控制进度条功能JavaScript实现水平进度条拖拽效果JavaScript实现带粒子效果的进度条
