マイ容量バー
4625 ワード
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
| 0% |
変更後は次のようになります.
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
| 0% |
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>