铁雪资源网 Design By www.gsvan.com
复制代码 代码如下:
<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实现进度条控件
铁雪资源网 Design By www.gsvan.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
铁雪资源网 Design By www.gsvan.com
暂无用htc实现进度条控件的评论...
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。