• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    用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;i500;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;
    }
    上一篇:用htc实现验证模块
    下一篇:HTML Component(HTC) 小应用
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    用htc实现进度条控件 用,htc,实现,进度,条,控件,