信鸽网

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

  作者：bea

本文实例介绍了基于javascript实现的页面跳转进度条，分享给大家供大家参考，具体内容如下 效果图： 具体代码： <HTML><HEAD><TITLE>open代码</TITLE><SCRIPT type=text/javascript><!--var ie5 = (document.all && document.getElementsByTagName);var step = 0;

本文实例介绍了基于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="";

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=sb

style="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=sbChild1

style="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>

<DIV

style="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=infor

style="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 = "/";

  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实现页面跳转进度条的完整代码，希望对大家的学习有所帮助。




有用  |  无用

猜你喜欢

您可能感兴趣的文章: