js control progress bar data

<style><!--
#time{

width:500px;
height: 20px;
background: red;
border-radius: 10px;
}
--></style>
<div id="time" style="width: 100%;">&nbsp;</div>
<div id="total">&nbsp;</div>
<p>
<script type="text/javascript">// <![CDATA[
//方法一、
//    var total=document.getElementById('total')
//    var times=document.getElementById('time');
//    console.log(times)
//    
//    var progress=times.offsetWidth
//    console.log(progress)    
//    var pro=setInterval(function(){    
//    progress--;
//    if(progress<0){
//    clearInterval(pro)    
//    }else{
//    times.style.width=progress+'px';
//    total.innerHTML=times.style.width;
//    }
//    },50)

方法二、
function run(){ 
var bar = document.getElementById("time"); 
var total = document.getElementById("total"); 
bar.style.width=parseInt(bar.style.width) - 1 + "%"; 
total.innerHTML = bar.style.width; 
if(bar.style.width == "0%"){ 
window.clearTimeout(timeout); 
return; 
} 
var timeout=window.setTimeout("run()",100); 
} 
window.onload = function(){ 
run(); 
}
    </script>
    </body>
</html>