本文实例介绍了基于javascript实现的页面跳转进度条，分享给大家供大家参考，具体内容如下
效果图：
具体代码：
<HTML> <HEAD> <TITLE>open代码</TITLE> <SCRIPT type=text/javascript> <!-- var ie5 = (document.all && document.getElementsByTagName); var step = 0; function setSB(v, el, inforEl, message) { if (ie5 || document.readyState == "complete") { filterEl = el.children[0]; valueEl = el.children[1]; if (filterEl.style.pixelWidth > 0) { var filterBackup = filterEl.style.filter; filterEl.style.filter = ""; filterEl.style.filter = filterBackup; } filterEl.style.width = v + "%"; valueEl.innerText = v + "%"; inforEl.innerText = message; } } function setSBByStep(v, el, inforEl, message) { if (ie5 || document.readyState == "complete") { step = step + v; filterEl = el.children[0]; valueEl = el.children[1]; if (filterEl.style.pixelWidth > 0) { var filterBackup = filterEl.style.filter; filterEl.style.filter = ""; filterEl.style.filter = filterBackup; } filterEl.style.width = step + "%"; valueEl.innerText = step + "%" inforEl.innerText = message; } } function fakeProgress(v, el) { if (v >= 101) location.href="http://www.jb51.net"; else { setSB(v, el, infor, "页面正在跳转中，请稍候..."); window.setTimeout("fakeProgress(" + (v + 1) + ", document.all['" + el.id + "'])", 10); } } //--> </SCRIPT> <SCRIPT language=javaScript> </SCRIPT> </HEAD> <BODY bgColor=#f9f9f9 topMargin=100 onload=fakeProgress(0,sb)> <P></P> <P></P> <P></P> <> <DIV align=center> <DIV id=sb > <DIV id=sbChild1 > <DIV ;height:12px; overflow: hidden></DIV> </DIV> <DIV ></DIV> </DIV> <> <P></P> <DIV id=infor ></DIV> </DIV> </BODY> </HTML>
代码二，也很不错，运行效果图如下
代码分享：
<html> <head> <script language="javascript"> function setSB(v, el) { var ie5 = (document.all && document.getElementsByTagName); if (ie5 || document.readyState == "complete") { filterEl = el.children[0]; valueEl = el.children[1]; filterEl.style.width = v + "%"; valueEl.innerText = v + "%"; } } function fakeProgress(v, el) { if (v > 100) location.href = "http://www.jb51.net/"; else { setSB(v, el); window.setTimeout("fakeProgress(" + (++v) + ", document.all['" + el.id + "'])", 20); } } </SCRIPT> </head> <body onload="fakeProgress(0, sb)" topmargin=180 bgcolor=#CCCCCC> <center> <p align=center>正在进入查字典教程网，请稍侯……</p> <span id=sb> <div></div> <div></DIV> </span> </center> </body> </html>
代码直接复制粘贴即可运行，大家可以试验一下。
以上就是为大家分享的JS实现页面跳转进度条的完整代码，希望对大家的学习有所帮助。