复制代码 代码如下:
<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;
}
<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实现进度条控件”评论...
更新日志
2024年07月01日
2024年07月01日
- 《陈百强28CD合集》1979-1993 低速原抓[CUE+WAV][8.3G]
- 【蓝调摇滚】JohnHaydock-2024-StraightLineOnACurvedRoad(FLAC)
- 感受独特魅力《百万双钢琴演奏曲》5CD[WAV+CUE]
- 【古典音乐】安娜·莫福《咏叹调》美国版SACD[WAV+CUE]
- 《法拉利·汽车专用试音碟》名贵音响顶级黑胶金碟[CUE+WAV][478M]
- 群星《惠威试音碟5CD》顶级音质[CUE+APE][1.7G]
- 《101系列:百分百3CD 100首百分百经典金曲》[WAV+CUE][2.9GB]
- 群星.2004-《第八届广州国际高级音响展》HIFI珍藏版[APE+CUE]
- 红音堂《蔡琴往事系列》SQCD紫银合金5CD[wav]
- 张小英1978-可爱的人[新加坡黑胶版][WAV+CUE]
- 张小英1978-心有千千结[新加坡黑胶版][WAV+CUE]
- 谭晶《祖国万岁·作品全集》(8CD)[WAV+CUE]
- 群星.2010-《第13届汕头音响展纪念CD》非卖品[FLAC+CUE]
- 群星.2010-《第13届汕头音响展纪念CD》非卖品[FLAC+CUE]
- 吉尔·沙汉姆-《梁祝柴科夫斯基小提琴协奏曲(GilShaham)》[WAV分轨]