2012-09-19 49 views
-1

如何修改下面的代码,以便在进度条运行时能够在框中添加居中的“加载...”消息的背景? IE浏览器。而进度条在DIV中的后台运行,它会在盒子的中心显示LOADING ...”。在进度条内添加一个居中的“加载...”消息

<!DOCTYPE html> 
<html> 
<head> 

<script type="text/javascript"> 
var prg_width = 200; 
var progress_run_id = null; 

function progress() { 
var node = document.getElementById('progress'); 
    var w = node.style.width.match(/\d+/); 

    if (w == prg_width) { 
     clearInterval(progress_run_id); 
     w = 0; 
     alert("done") 
    } else { 
     w = parseInt(w) + 5 + 'px';   
    } 
    node.style.width = w; 
} 

function runit() { 
    progress_run_id = setInterval(progress, 30); 
} 

</script> 
</head> 
<body> 
     <div style="border: 1px solid #808080; width:200px; height:20px;"> 
     <div id="progress" style="height:20px; width:0px; background-color:#DBDBDB;"/> 
     </div> 
     </div> 
     <p><a href="javascript:runit()">Start</a></p> 
</body> 
</html> 

回答

0
<div style="border: 1px solid #808080; width:200px; height:20px;"> 
    <div id="progress" style="text-align: center; height:20px; width:0px; background-color:#DBDBDB;"/> 

    <div style=" position: fixed; left: 92px ">loading</div> 


    </div> 
    </div>