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

赞 (0)

相关推荐

  • 用htc实现进度条控件

    复制代码 代码如下: <PUBLIC:COMPONENT> <PUBLIC:METHOD   NAME ="Init" INTERNALNAME ="fnCreateProgressBar" /> <PUBLIC:METHOD   NAME ="showProgress" INTERNALNAME ="showProgress" /> <PUBLIC:PROPERTY NAME=&qu

  • Android自定义View圆形进度条控件（三）

    Android自定义View圆形进度条控件（三）

    继续练习自定义View,这次带来的圆形进度条控件与之前的圆形百分比控件大同小异,这次涉及到了渐变渲染以及画布旋转等知识点,效果如下: 虽然步骤类似,但是我还是要写,毕竟基础的东西就是要多练 1.在res/values文件夹下新建attrs.xml文件,编写自定义属性: <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="Circ

  • Android的进度条控件描述

     一.ProgressBar进度条 在某项延续性工作的进展过程中为了不让用户觉得程序死掉了,需要有个活动的进度条,表示此过程正在进行中. 用户浏览网页的时候,中间肯定有个传输过程,所以用进度条让用户耐心等待.再比如在下载应用中,它也会有进度条显示下载进度. ProgressDialog是继承自Android.app.ProgressDialog所设计的互动对话窗口,应用时,必须新建ProgressDialog对象,运行时会弹出"对话框"作为提醒,此时应用程序后台失去焦点,直到进程结束后

  • Android利用Paint自定义View实现进度条控件方法示例

    Android利用Paint自定义View实现进度条控件方法示例

    前言 View的三大流程:测量,布局,绘制,自定义View学的是啥?无非就两种:绘制文字和绘制图像. 我们在上一篇文章<Android绘图之Paint的使用>中学习了Paint的基本用法,但是具体的应用我们还没有实践过.从标题中可知,本文是带领读者使用Paint,自定义一个进度条控件. 效果图 上图就是本文要实现的效果图. 实现过程 既然是自定义控件,本文的该控件是直接继承View,然后重写View的onMeasure和onDraw方法来实现.其中onMeasure主要作用是测量控件的宽/高.

  • Android自定义view实现水波进度条控件

    通过自定义view实现了一个水滴滴落到水波面,溅起水花并且水波流动上涨的进度条控件.之前看到过好多水波流动的进度条,感觉欠缺些东西,就想到了水滴到水平面,溅起水花然后水流动上涨的进度条效果,于是自己动手写了出来.效果如下,视频录制有些卡顿,实际会流畅很多. 一.用法 1.布局文件中添加WaveProgressView,circleColor属性为圆环颜色,waterColor属性为水波水滴的颜色,progress属性为初始的进度 <com.yhongm.wave_progress_view.Wa

  • Python tkinter进度条控件(Progressbar)的使用

    Python tkinter进度条控件(Progressbar)的使用

    进度条的作用就是提示用户进度信息.可以有两种方式: 1)提示完成度 比如,正在安装程序的进度,一般是从0%到100%. 2)提示正在进行处理 比如正在处理数据内容,并不知道何时能够处理完毕.这个时候的进度是提示用户有任务正在进行.此类的提示没有完成度提示,只是进度条来回往复的移动,表示任务正在进行中. 进度条对象是定义在ttk中的,使用的时候需要引入ttk包. 1 属性 属性 描述 cursor 鼠标位于进度条内时的形状 length 进度条长度 maximum 进度条最大刻度值 mode 进度

  • Javascript jquery css 写的简单进度条控件

    通过我们伟大的 CSS,可以实现非常漂亮的进度条样式.加上 Javascript 的效果,就可以完全"欺骗"我们的用户,让他们有耐心等待浏览器处理完成.上述的原理已经知道了,那么就可以直接看代码了.本人使用的还是 jQuery 框架,因为这样简短的代码可能会更容易理解. 当然这个控件还有很多需要完成的地方,我仅仅是提供了一种遵循 Web 标准的实现思路.废话不多说. Javascript Progress Bar Demo - jb51.net #progress {backgroun

  • android ListView和ProgressBar(进度条控件)的使用方法

    android ListView和ProgressBar(进度条控件)的使用方法

    ListView控件的使用:ListView控件里面装的是一行一行的数据,一行中可能有多列,选中一行,则该行的几列都被选中,同时可以触发一个事件,这种控件在平时还是用得很多的.使用ListView时主要是要设置一个适配器,适配器主要是用来放置一些数据.使用起来稍微有些复杂,这里用的是android自带的SimpleAdapter,形式如下:android.widget.SimpleAdapter.SimpleAdapter(Context context, List<? extends Map<

  • Android进度条控件progressbar使用方法详解

    Android进度条控件progressbar使用方法详解

    一.简介 二.方法 1)进度条ProgressBar使用方法 1.在layout布局文件中创建ProgressBar控件 <ProgressBar style="?android:attr/progressBarStyleHorizontal" android:layout_width="match_parent" android:layout_height="wrap_content" android:progress="30&

  • Javascript 写的简单进度条控件

    很多的时候用户需要等待你"臃肿"的 Javascript 代码处理完成(Web 2.0 的特色).期间或许加入一个类似于进度条的东西让用户有点"安慰".这个东西实现起来并不复杂,无非就是获得总的处理条目,然后获得一个百分比,再显示输出. 通过我们伟大的 CSS,可以实现非常漂亮的进度条样式.加上 Javascript 的效果,就可以完全"欺骗"我们的用户,让他们有耐心等待浏览器处理完成.上述的原理已经知道了,那么就可以直接看代码了.本人使用的还是

随机推荐