html 进度条

<html> 
<head> 
<title>进度条</title> 
<style type="text/css">  
.container{  
   500px;    
   height:25px;  
 }
#bar{  
   background:#95CA0D;  
   border:0px solid #6C9C2C;
   float:left; 
   height:25px;  
   100%;
   line-height:100%; 
   margin:0px;
 }  
 #total{
    10%;
    height:27px;
 }
 #outer{
    border:1px solid #6C9C2C;
 }
 .ccc{
    display: inline-block;
 }
 #wid{
    547px;
    height:27px;
 }
 #tbox{
    height:27px;
    float:right;
    padding-top:1.5px;
 }
</style>  
<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()",200); 
      }
        window.onload = function(){  
           run(); 
        }  
</script> 
  
</head> 
<body>
  <div id="wid" class="container ccc">

  <div  id="outer" class="container ccc">
   <span id="bar" style="0%;"></span>
  </div>
  <div id="tbox" class="ccc">
  <div id="total"></div>
  </div>

  </div>
   
</body> 
</html>

查看全文

相关阅读:
java数据库连接池proxool介绍及mysql8小时断开连接问题的说明
 golang 做了个mutex与atomic性能测试
 Pcre 安装
 go err
go if switch range
Nginx 处理Http请求头部流程
 go 指针
 golang struct、interface详解
 go slice详解
 Linux基础

原文地址：https://www.cnblogs.com/sea-stream/p/10524198.html