进度条一般在手机上用到的比较广泛，刚好最近的项目也是一直在做手机站，这个特效是手机端的一个界面，现在我把改成pc端了，进度条的快慢速度和样式可自行调节，改动也是很方便的，不多说，看代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>js控制进度条到达100%跳转界面</title></head><style> * { margin: 0; padding: 0; }
html, body { font-family: arial, "microsoft yahei"; font-size: 14px; background: #c2d7ac; }
.progress { width: 300px; height: 30px; margin: auto;; background: #70b4e5; border-radius: 5px; -webkit-box-shadow: inset -2px 0px 2px #3189dd, inset 0px -2px 2px #d4edf9, inset 2px 0px 2px #d4edf9, inset 0px 2px 2px #3189dd; box-shadow: inset -2px 0px 2px #3189dd, inset 0px -2px 2px #d4edf9, inset 2px 0px 2px #d4edf9, inset 0px 2px 2px #3189dd; }
.progress_bar { width: 0%; height: 26px; background: url("images/bar.jpg") repeat; background-size: auto 100%; border-radius: 5px; position: relative; left: 3px; right: 3px; top: 2px; }
p { width: 300px; text-align: center; font-size: 14px; color: #c20606; position: absolute; top: 98px; }</style><body ><div style="height: 120px;"></div><div class="progress"> <div id=load> <div class="progress_bar"></div> <p>0</p> </div></div><script type="text/javascript"> function setLOAD(v, el) { var read = (document.all && document.getElementsByTagName); if (read || document.readyState == "complete") valueEl = el.children[1]; { filterEl = el.children[0]; valueEl.innerText = v + "%"; filterEl.style.width = v + "%";
} } function fakeProgress(v, el) { if (v > 100) location.href = "begin.html"; else { setLOAD(v, el); window.setTimeout("fakeProgress(" + (++v) + ", document.all[‘" + el.id + "‘])", 2000); } }</script>
</body></html>
效果：
时间： 2024-08-07 21:20:15