当前位置： 移动技术网 > IT编程>网页制作>技巧 > 用htc实现进度条控件

用htc实现进度条控件

2017年12月01日  | 移动技术网IT编程  | 我要评论

言情小说 txt,全球top100最美丽女人,11 sasa

复制代码 代码如下:

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

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网