用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;
}
1. 本站所有文章及资源来源于用户上传和网络,如有侵权请联系站长处理!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律,否则后果自负!
4. 如有链接无法下载、失效或广告,请联系管理员处理!
5. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

中国站长社区 » 用htc实现进度条控件

发表评论

发布资源,赚取佣金,随时提现

立即发布 了解详情