html 进度条

html 进度条

<html>
<head>
<title>进度条</title>
<style type="text/css">
.container{
width:500px;
height:25px;
}
#bar{
background:#95CA0D;
border:0px solid #6C9C2C;
float:left;
height:25px;
width:%;
line-height:%;
margin:0px;
}
#total{
width:%;
height:27px;
}
#outer{
border:1px solid #6C9C2C;
}
.ccc{
display: inline-block;
}
#wid{
width:547px;
height:27px;
}
#tbox{
height:27px;
float:right;
padding-top:.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) + + "%";
total.innerHTML = bar.style.width;
if(bar.style.width == "100%"){
window.clearTimeout(timeout);
return;
}
var timeout=window.setTimeout("run()",);
}
window.onload = function(){
run();
}
</script> </head>
<body>
<div id="wid" class="container ccc"> <div id="outer" class="container ccc">
<span id="bar" style="width:0%;"></span>
</div>
<div id="tbox" class="ccc">
<div id="total"></div>
</div> </div> </body>
</html>
上一篇:koa+mysql实现增删改查-全栈之路(001)


下一篇:Luogu P2522 [HAOI2011]Problem b