我的容量条

zgqynx

浏览: 1370695 次
性别:
来自: 北京

最近访客更多访客>>

723499280

xx5333

zhangmin53

zhangyy130

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Microsoft

<html>
<head>
<title>简单的容量条</title>
<style type="text/css">

</style>
<script>
i=40;
function run() {
//i++;
p = i + "%";
document.getElementById("Pointer").style.width = p;//设置容量条填充色长度
document.getElementById("Lable").innerHTML = p;//只是显示一个百分比
//flag = window.setTimeout(run,300);
//if(i == 100) { window.clearTimeout(flag); i=0;}
}//Endfor
</script>
</head>

<body onload="run()"><br/>
<table width="400">
<tr>
<td bgcolor="#FFFF00" style="padding:0px">
<div id="ProgressBar">
<div id="Lable">0%</div>
<div id="Pointer" style="width:0%"></div>
</div></td>
</tr>
</table><br/>
<button onClick="run();">开始</button>
</body>
</html>

修改之后的如下：
<html>
<head>
<title>简单的进度条</title>
<style type="text/css">

</style>
<script>
i=40;
function run() {
//i++;
p = i + "%";
document.getElementById("Pointer").style.width = p;//设置容量条填充色长度
alert(document.getElementById("Pointer").style.height);
document.getElementById("Pointer").style.height = "0%";//设置容量条填充色长度
document.getElementById("Lable").innerHTML = p;//只是显示一个百分比
//flag = window.setTimeout(run,300);
//if(i == 100) { window.clearTimeout(flag); i=0;}
}//Endfor
</script>
</head>

<body onload="run()"><br/>
<table width="400">
<tr>
<td bgcolor="#FFFF00" style="padding:0px">
<div id="ProgressBar" >
<div id="Lable">0%</div>
<div id="Pointer" style="width:0%;height:10%" ></div>
</div></td>
</tr>
</table><br/>
<button onClick="run();">开始</button>
</body>
</html>

3.再次修改后

<html>
<head>
<title>简单的进度条</title>
<style type="text/css">
<!--
#ProgressBar {
	font:12px Verdana, Arial, Helvetica, sans-serif;
	border:1px solid #5B94DF;/*边框颜色*/
}
#Pointer {
	/*border:7px solid  #FFFF00;*/
	
	border-bottom: 3px solid #FFFF00; border-left: 0px solid #FFFF00; border-right: 5px solid #FFFF00; border-top: 5px solid #FFFF00; 
	line-height:6px;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#000000, endColorstr=#000000);
	
}
#Lable {
	position:absolute;
	width:100%;
	text-align: center;
	vertical-align: center;
}
-->
</style>
<script>
i=50;
function run() {
	i++;
	p = i + "%";
	document.getElementById("Pointer").style.width = p;//设置容量条填充色长度
	//alert(document.getElementById("Pointer").style.height);
	//document.getElementById("Pointer").style.height = "10%";//设置容量条填充色长度
	//document.getElementById("Lable").innerHTML = p;//只是显示一个百分比
	//flag = window.setTimeout(run,300);
	//if(i == 100) { window.clearTimeout(flag); i=0;}
}//Endfor
</script>
</head>

<body onload="run()"><br/>
<table width="400">
	<tr>
		<td bgcolor="#FFFF00" style="padding:0px">
			<div id="ProgressBar" ><!-- 用来控制外边框 的颜色　-->
				<!--<div id="Lable">0%</div> 只是 显示百分比　 -->
				<div id="Pointer" style="width:0%" ></div><!-- 用来控制容量条实际容量的颜色填充的长度　-->
			</div>
		</td>
	</tr>
</table><br/>
<button onClick="run();">开始</button>
</body>
</html>

分享到：

三个日期函数 | css之FILTER:progid:DXImageTransform.Mic ...

2007-06-21 21:01
浏览 1589
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论