htc

用htc实现进度条控件

下面是代码：
<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; 

}
0
分享 2015-10-03

0 个评论

要回复文章请先登录或注册