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

Javascript 相关文章推荐
Dom加载让图片加载完再执行的脚本代码
May 15 Javascript
jquery 实现的全选和反选
Apr 15 Javascript
javascript iframe内的函数调用实现方法
Jul 19 Javascript
JS 实现列表与多选框选择附预览动画
Oct 29 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
Nov 02 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
Mar 05 Javascript
javascript中callee与caller的区别分析
Apr 20 Javascript
Javascript中With语句用法实例
May 14 Javascript
Winform客户端向web地址传参接收参数的方法
May 17 Javascript
使用javascript函数编写简单银行取钱存钱流程
May 26 Javascript
浅谈vue父子组件怎么传值
Jul 21 Javascript
Vue基础配置讲解
Nov 29 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
You might like
php下实现伪 url 的超简单方法[转]
2007/09/24 PHP
说说PHP的autoLoad自动加载机制
2012/09/27 PHP
Javascript:为input设置readOnly属性(示例讲解)
2013/12/25 Javascript
javascript中数组array及string的方法总结
2014/11/28 Javascript
轻松实现jQuery添加删除按钮Click事件
2017/03/13 Javascript
jquery DataTable实现前后台动态分页
2017/06/17 jQuery
360提示[高危]使用存在漏洞的JQuery版本的解决方法
2017/10/27 jQuery
vue-cli项目中使用Mockjs详解
2018/05/14 Javascript
微信小程序实现商品属性联动选择
2019/02/15 Javascript
JS大坑之19位数的Number型精度丢失问题详解
2019/04/22 Javascript
layui实现根据table数据判断按钮显示情况的方法
2019/09/26 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
2019/12/26 Javascript
vue 实现click同时传入事件对象和自定义参数
2021/01/29 Vue.js
Python获取网页上图片下载地址的方法
2015/03/11 Python
Python使用OpenCV进行标定
2018/05/08 Python
Python使用pymongo模块操作MongoDB的方法示例
2018/07/20 Python
python2.7 安装pip的方法步骤(管用)
2019/05/05 Python
python实现QQ批量登录功能
2019/06/19 Python
Python3中的最大整数和最大浮点数实例
2019/07/09 Python
解决django xadmin主题不显示和只显示bootstrap2的问题
2020/03/30 Python
Python super()方法原理详解
2020/03/31 Python
如何使用 Python 读取文件和照片的创建日期
2020/09/05 Python
关于css中margin的值和垂直外边距重叠问题
2020/10/27 HTML / CSS
Ted Baker美国官网:英国时尚品牌
2018/10/29 全球购物
泰国国际航空公司官网:Thai Airways International
2019/12/04 全球购物
智能家居、吸尘器、滑板车、电动自行车网上购物:Geekmaxi
2021/01/18 全球购物
C#基础面试题
2016/10/17 面试题
如何查看在weblogic中已经发布的EJB
2012/06/01 面试题
大专应届生个人简历的自我评价
2013/10/15 职场文书
《手指教学》反思
2014/02/14 职场文书
人事专员的岗位职责
2014/03/01 职场文书
美术学专业求职信
2014/07/23 职场文书
2014年客房服务员工作总结
2014/11/18 职场文书
感谢信怎么写
2015/01/21 职场文书
2015党建工作简报
2015/07/21 职场文书
讨论nginx location 顺序问题
2022/05/30 Servers