用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;
    }

发表评论

发表评论