CSS+JS通过弹出层打造带渐变的进度条
来源：互联网 发布：淘宝聚划算怎么抢 编辑：程序博客网 时间：2024/05/18 20:35
<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)" onclick="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>
