系统城装机大师 - 固镇县祥瑞电脑科技销售部宣传站!

当前位置:首页 > 脚本中心 > htc > 详细页面

用htc实现进度条控件

时间:2020-02-06来源:系统城作者:电脑系统城

复制代码 代码如下:
<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; 
}
分享到:

相关信息

系统教程栏目

栏目热门教程

人气教程排行

站长推荐

热门系统下载