用htc实现进度条控件

当前位置：首页 > 范文|应用文 > IT技术专栏 > 网页制作

用htc实现进度条控件

来源：阅读：629 次日期：2015-02-05 15:06:26

温馨提示：小编为您整理了“用htc实现进度条控件”,方便广大网友查阅！

代码如下:

<PUBLIC:COMPONENT>

<PUBLIC:METHOD NAME ="Init" INTERNALNAME ="fnCreateProgressBar" />

<PUBLIC:METHOD NAME ="showProgress" INTERNALNAME ="showProgress" />

<PUBLIC:PROPERTY NAME="Container"/>

<PUBLIC:PROPERTY NAME="Speed"/>

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>

<title>进度条测试</title>

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>

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

}

更多信息请查看IT技术专栏

上一篇：Oracle数据库的十种重新启动步骤

下一篇：浅谈Span和Div的区别

手机网站地址：用htc实现进度条控件

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！