脚本专栏

用htc实现进度条控件
脚本专栏 2024/12/23 佚名
3 2
复制代码 代码如下:
<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实现进度条控件
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
白云城资源网 Copyright www.dyhadc.com

评论“用htc实现进度条控件”

暂无“用htc实现进度条控件”评论...
www.dyhadc.com 白云城资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接
白云城资源网 Copyright www.dyhadc.com