代码如下:
<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;
}
更多网页制作信息请查看： 网页制作 |
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
