setTimeout
<html>
<head>
<title>进度条</title>
<style type="text/css">
.container{
width: 450px;
border: 1px solid #000;
height: 25px;
}
#bar{
background: #000;
float: left;
height: 100%;
text-align: center;
}
</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%"){
clearTimeout(timeout);
return;
}
var timeout = setTimeout("run()",100);
}
window.onload = function(){
run();
}
</script>
</html>
setInterval
<html>
<head>
<title>进度条</title>
<style type="text/css">
.processcontainer{
width: 450px;
border: 1px solid #000;
height: 25px;
color: #fff;
}
#processbar{
background: #000;
float: left;
height: 100%;
text-align: center;
}
</style>
</head>
<body>
<div class="processcontainer">
<div id="processbar" style="width:0%;"></div>
</div>
</body>
<script type="text/javascript">
function setProcess(){
var processbar = document.getElementById("processbar");
processbar.style.width = parseInt(processbar.style.width) + 1 + "%";
processbar.innerHTML = processbar.style.width;
if(processbar.style.width == "100%"){
clearInterval(bartimer);
}
}
var bartimer = setInterval(function(){setProcess();},100);
window.onload = function(){
bartimer;
}
</script>
</html>