<html>
<head>
<title>CSS+JS通過彈出層打造帶漸變的進度條</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
.belowdiv{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color:#99CCFF;
z-index:1001;
filter:alpha(opacity=85);
}
.topdiv {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 65px;
padding: 20px;
border-top:solid,16px,red;
border-left:1px;
border-right:1px;
border-bottom:1px;
background-color: white;
z-index:1002;
overflow: auto;
}
#load {
width: 100%;
height: 25px;
border: 1px #000 solid;
}
#loading {
position: absolute;
z-index: 2;
height: 23;
filter:progid:DXImageTransform.microsoft.gradient(gradienttype = 1, startColorStr = white, endColorStr = #39867b);
}
#loadtext {
position: absolute;
z-index: 3;
width: 100%;
height: 100%;
line-height: 23px;
text-align: center;
}
</style>
<script type="text/javascript">
var i=0;
function test(){
i++;
document.getElementById("load").style.display='';
document.getElementById("loading").style.width = i + "%";
document.getElementById("loadtext").innerText = i + "%";
if(i<100){setTimeout("test()",200);}
else{
document.getElementById("load").style.display='none';
showOrHide(2);
}
}
function showOrHide(flag) {
if(flag == 1) {
document.getElementById("top").style.display = "block";
document.getElementById("below").style.display = "block";
}
if(flag == 2) {
document.getElementById("top").style.display = "none";
document.getElementById("below").style.display = "none";
i=0;
}
}
</script>
</head>
<body>
<a href="javascript:void(0)" οnclick="showOrHide(1);test();">開始</a>
<div id="top" class="topdiv">
<div id="load">
<div id="loading"></div>
<div id="loadtext">1%</div>
</div>
</div>
<div id="below" class="belowdiv"></div>
</body>CSS+JS通過彈出層打造帶漸變的進度條
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.