Barre de progression de saut de page directement utilisée Compétences d'implémentation JS

Barre de progression de saut de page directement utilisée Compétences d'implémentation JS_javascript

WBOY

Libérer： 2016-05-16 15:21:16

original

1434 Les gens l'ont consulté

Cet article présente l'exemple de barre de progression de saut de page basée sur javascript et le partage avec tout le monde pour votre référence. Le contenu spécifique est le suivant

Rendu :

Code spécifique :

<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>
<!-- 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>

Copier après la connexion

Le code 2 est également très bon, l'effet de course est le suivant

Partage de codes :

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

Copier après la connexion

Le code peut être exécuté directement en le copiant et en le collant. Vous pouvez l'essayer.

Ce qui précède est le code complet pour implémenter la barre de progression de saut de page dans JS partagé avec vous. J'espère qu'il sera utile pour votre apprentissage.