直接拿来用的页面跳转进度条JS实现

2019-11-20 10:50:54

字体：大中小

来源：转载

供稿：网友

本文实例介绍了基于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="//www.VeVB.COm";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><!-- Status Bar Starts --><DIV align=center><DIV id=sbstyle="BORDER-RIGHT: #ffffff 1px solid; BORDER-TOP: #ffffff 1px solid; BACKGROUND: #99ccff; BORDER-LEFT: medium none; WIDTH: 400px; BORDER-BOTTOM: #cccccc 1px solid; HEIGHT: 14px; TEXT-ALIGN: left"><DIV id=sbChild1style="FILTER: Alpha(Opacity=0, FinishOpacity=80, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=0); OVERFLOW: hidden; WIDTH: 100%; POSITION: absolute; HEIGHT: 12px"><DIV style="BACKGROUND: #000000; WIDTH: 100%" ;height:12px; overflow:hidden></DIV></DIV><DIVstyle="FONT-SIZE: 10px; WIDTH: 400px; COLOR: white; FONT-FAMILY: arial; POSITION: absolute; HEIGHT: 14px; TEXT-ALIGN: center"></DIV></DIV><!-- Status Bar Ends --><P></P><DIV id=inforstyle="FONT-SIZE: 11px; WIDTH: 100%; COLOR: #999999; FONT-FAMILY: arial; POSITION: relative; HEIGHT: 14px; TEXT-ALIGN: center"></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 = "//www.VeVB.COm/";  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 style="font-szie:9pt; line-height: 100%">正在进入武林网，请稍侯……</p><span id=sb style="width: 500px"><div style="filter: Alpha(Opacity=0, FinishOpacity=60, style=1, StartX=0, StartY=0, FinishX=100, FinishY=0); width: 0%; height: 12px; position: absolute; background: #9999ff"></div><div style="font-size: 12px; width: 100%; color: #ff3333; font-family: arial; text-align: center"></DIV></span> </center> </body></html>

代码直接复制粘贴即可运行，大家可以试验一下。

以上就是为大家分享的JS实现页面跳转进度条的完整代码，希望对大家的学习有所帮助。

上一篇：javascript类型系统 Window对象学习笔记

下一篇：基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载