htc实现进度条功能的方法
复制代码 代码如下:
<PUBLIC:COMPONENT>
<PUBLIC:METHODNAME="Init"INTERNALNAME="fnCreateProgressBar"/>
<PUBLIC:METHODNAME="showProgress"INTERNALNAME="showProgress"/>
<PUBLIC:PROPERTYNAME="Container"/>
<PUBLIC:PROPERTYNAME="Speed"/>
<SCRIPTLANGUAGE=javascript>
varstartTime=null;
functionfnCreateProgressBar(){
now=newDate();
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;
}
functionpause(numberMillis){
vardialogScript=
'window.setTimeout('+
'function(){window.close();},'+numberMillis+');';
varresult=
window.showModalDialog(
'javascript:document.writeln('+
'"<script>'+dialogScript+'<'+'/script>")');
}
functionshowProgress(StatesDesc){
now=newDate();
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>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
<title>进度条测试</title>
<linkrel="stylesheet"type="text/css"href="ProgressBar.css">
<script>
functionDemo(){
PrgBar.Container=document.all.layer1
PrgBar.Init();
for(vari=0;i<500;i++){
if(i%5==0)PrgBar.showProgress("操作进行中......")
}
PrgBar.showProgress("操作完成!")
}
</script>
</head>
<body>
<divstyle="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><inputtype="button"value="测试"name="B3"onclick="Demo()"></p>
<Progressbarid="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:1pxridge#C0C0C0;
}