用htc实现进度条控件
时间：2020-02-06来源：系统城作者：电脑系统城
复制代码 代码如下:
<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;
}
分享到：
相关信息
热门系统总排行
- 4754次 1 雨林木风Win10专业版64位纯净版系统官方下载
- 3784次 2 电脑公司ghost win7 64位纯净专业版v2019.08
- 2502次 3 Win11官方最新版系统下载_Ghost Win11 22000.434(KB5009566)专业免激活版下载
- 2324次 4 深度技术 GHOST WIN10 X64 纯净版 V2019.09（64位）
- 1882次 5 电脑系统城ghost win7 sp132位 经典标准版 V2019.11
- 1794次 6 电脑公司 GHOST XP SP3 安全稳定纯净版 V2019.08
- 1733次 7 电脑公司ghost win7 32位精简旗舰版v2019.08
- 1700次 8 电脑公司 GHOST WIN10 X64 正式专业版 V2019.09（64位）
系统教程栏目
栏目热门教程
人气教程排行
- 56679次 1 联想笔记本进入bios的三种方法 联想笔记本怎么进入bios
- 51284次 2 打印机为什么打印出来是黑的_打印出来纸张表面黑的解决方法
- 39166次 3 笔记本电脑序列号在哪|笔记本电脑序列号怎么看
- 32783次 4 对于目标文件系统文件过大无法复制到u盘怎么解决方法
- 31658次 5 键盘全部按键没反应的解决方法 键盘被锁住按什么键恢复
- 30927次 6 键盘win键无效的解决办法 电脑win键失效怎么办?
- 30837次 7 mac连上wifi却上不了网如何解决 网络没问题但mac无法上网怎么办
- 27299次 8 小马激活工具 Win10正版激活 一键完美激活Win10_小编亲测
- 26437次 9 win7旗舰版激活密钥大全
- 25426次 10 电脑免费的加速器有哪些 永久免费的四款加速器推荐
站长推荐
- 12747次 1 Win11怎么激活？Win11系统永久激活方法汇总(附激活码)
- 6277次 2 联想拯救者win10一键恢复如何使用_联想win10一键还原孔使用方法
- 5819次 3 如何用u盘装系统？用系统城U盘启动制作盘安装Win10系统教程
- 5116次 4 怎么在u盘pe下给电脑系统安装ahci驱动
- 4682次 5 联想电脑开机出现PXE-MOF:Exiting Intel PXE ROM怎么解决
- 3947次 6 华硕笔记本bios utility ez mode设置图解以及切换成传统bios界面方法华硕笔记本bios utility ez mode设置图解以及切换成传统bios界面方法
- 3173次 7 win10怎么改为uefi启动_win10系统设置uefi启动模式的方法
- 1926次 8 CentOS 8 系统图形化安装教程（超详细）
- 1876次 9 win10系统下检测不到独立显卡如何解决
- 1850次 10 VMware中安装Linux系统（Redhat8）及虚拟机的网络配置方法
热门系统下载
- 4754次 1 雨林木风Win10专业版64位纯净版系统官方下载
- 4626次 2 Windows Server 2019 官方原版系统64位系统下载
- 4322次 3 网吧游戏专用Win7 Sp1 64位免激活旗舰版 V2021.05
- 4248次 4 Windows Server 2008 简体中文官方原版32位系统下载
- 3944次 5 Windows Server 2008 R2 简体中文官方原版64位系统下载
- 3784次 6 电脑公司ghost win7 64位纯净专业版v2019.08
- 3617次 7 电脑公司ghost win10 64位游戏专用精简网吧版v2020.05
- 3569次 8 Windows Server 2012 R2 官方原版系统64位系统下载
