编程 Javascript

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

Posted in Javascript onJanuary 06, 2016

本文实例介绍了基于javascript实现的页面跳转进度条，分享给大家供大家参考，具体内容如下

效果图：

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

具体代码：

<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="https://3water.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=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>

代码二，也很不错，运行效果图如下

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

代码分享：

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

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

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

html数组字符串拼接的最快方法

Sep 16 Javascript

js 判断脚本加载完毕的代码

Jul 13 Javascript

在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南

Dec 29 Javascript

AngularJS 单元测试（一）详解

Sep 21 Javascript

JavaScript实现的CRC32函数示例

Nov 23 Javascript

vue实现表格增删改查效果的实例代码

Jul 18 Javascript

Vue.js 表单控件操作小结

Mar 29 Javascript

webpack项目轻松混用css module的方法

Jun 12 Javascript

webpack4之SplitChunksPlugin使用指南

Jun 12 Javascript

解决在vue项目中webpack打包后字体不生效的问题

Sep 01 Javascript

详解iview的checkbox多选框全选时校验问题

Jun 10 Javascript

详解前端任务构建利器Gulp.js使用指南

Apr 30 Javascript

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

Jan 06 #Javascript

JavaScript动态创建div等元素实例讲解

Jan 06 #Javascript

谈谈JavaScript类型系统之Math

Jan 06 #Javascript

莱鸟介绍javascript onclick事件

Jan 06 #Javascript

莱鸟介绍window.print()方法

Jan 06 #Javascript

JavaScript实现点击按钮直接打印

Jan 06 #Javascript

javascript中加var和不加var的区别你真的懂吗

Jan 06 #Javascript