用htc实现进度条控件

2020-01-31 16:06:18

字体：大中小

来源：转载

供稿：网友

<PUBLIC:COMPONENT> 
<PUBLIC:METHOD   NAME ="Init" INTERNALNAME ="fnCreateProgressBar" /> 
<PUBLIC:METHOD   NAME ="showProgress" INTERNALNAME ="showProgress" /> 
<PUBLIC:PROPERTY NAME="Container"/> 
<PUBLIC:PROPERTY NAME="Speed"/> 

<SCRIPT LANGUAGE=javascript> 
     var startTime = null ;     
     function fnCreateProgressBar(){  
         now  = new Date(); 
        startTime = now.getTime(); 
        now = null  
         oContainer = element.Container 
        oContainer.innerHTML = ""; 
        oDiv = window.document.createElement("DIV") 
        oDiv.className = "progress" 
        oContainer.appendChild(oDiv) 
        oDiv.style.display = "";  
        element.bar = oDiv;     
    } 

   function pause(numberMillis) { 
        var dialogScript =  
           'window.setTimeout(' + 
           ' function () { window.close(); }, ' + numberMillis + ');'; 
        var result =  
         window.showModalDialog( 
           'javascript:document.writeln(' + 
            '"<script>' + dialogScript + '<' + '/script>")'); 
   } 

    function showProgress(StatesDesc){ 
         now  = new Date(); 
         currTime = now.getTime(); 
         now = null 
         if(StatesDesc!=null) window.status = StatesDesc+"当前耗时:"+(currTime - startTime)+"毫秒!"; 
        element.bar.style.width = (currTime - startTime) / element.Speed; 
        pause(1) 
    } 
</script> 
</PUBLIC:COMPONENT>

应用例子:

复制代码代码如下:

<html> 

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>进度条测试</title> 
<link rel="stylesheet" type="text/css" href="ProgressBar.css"> 
<script> 
function Demo(){ 
    PrgBar.Container = document.all.layer1 
    PrgBar.Init(); 
    for(var i=0;i<500;i++){ 
        if(i%5==0) PrgBar.showProgress("操作进行中......") 
    } 
    PrgBar.showProgress("操作完成!") 
} 
</script> 
</head> 

<body> 
<div style="position: absolute; width: 612px; height: 19px; z-index: 1; left: 10px; top: 72px; border-style: solid; border-width: 1px; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px" id="layer1"></div> 
<p><input type="button" value="测试" name="B3" onclick="Demo()"></p> 
<Progressbar id="PrgBar" class="ProgressBar" Speed="10"/> 
</body> 

</html>

样式文件:ProgressBar.css

复制代码代码如下:

.ProgressBar 
{ 
    BEHAVIOR: url("ProgressBar.htc") 
} 
.progress{ 
    position: relative;  
    width: 0px;  
    height: 20px;  
    z-index: 1;  
    background-color: #006699; 
    filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#006699,endcolorstr=#E3EFFF,gradientType=0); 
    border: 1px ridge #C0C0C0; 
}