欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

用htc实现进度条控件

程序员文章站 2022-06-19 16:15:20
复制代码 代码如下:
复制代码 代码如下:

<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;
}
相关标签： 用htc实现进度条控件

上一篇： WPS表格提取身份证出生日期

下一篇： WPS表格数据转换

推荐阅读