js实现进度条

来源：互联网发布：华云数据面试编辑：程序博客网时间：2024/05/30 04:40

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gbk"><title>test</title><script type="text/javascript" src="jquery-1.11.2.min.js"></script><style type="text/css">.container{      width:450px;     border:1px solid #6C9C2C;      height:25px;    } #bar{      background:#95CA0D;      float:left;     height:100%;      text-align:center;      line-height:150%;   }  </style></head><body><div class="container">     <div id="bar" style="width:0%;"></div>     </div>     <span id="total"></span>  </body><script type="text/javascript">function run(){       var bar = document.getElementById("bar");          var total = document.getElementById("total");      bar.style.width=parseInt(bar.style.width) + 1 + "%";       total.innerHTML = bar.style.width;      if(bar.style.width == "100%"){         window.clearTimeout(timeout);        return;      }      var timeout=window.setTimeout("run()",100);    }  window.onload = function(){          run();     } </script></html>

0 0