js网页进度条等待特效
本特效共分三步：
1.在<head></head>中加入：
<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.roeyuta.com/Ch";
else {
setSB(v, el, infor, "欢迎访问 荣盛达电源 荣御达电源，页面载入中，请稍等！");
window.setTimeout("fakeProgress(" (v 1) ", document.all['" el.id "'])", 150);
}
}
//-->
</SCRIPT>
2.在<body>中加入：οnlοad=fakeProgress(0,sb)
<BODY οnlοad=fakeProgress(0,sb)>
3.在<body></body>中加入：
<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>
<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>
js网页进度条等待特效相关推荐
- android 斑马线进度条,jQuery简单斑马线样式loading进度条动画特效
这是一款非常简单实用的jQuery斑马线样式loading进度条动画特效.该进度条特效通过简单的jQuery代码就完成了可控制的进度条动画特效.斑马线效果使用CSS3来完成,对不支持CSS3的浏览器可 ...
- c js html页面进度条,js实现进度条的方法
本文实例讲述了js实现进度条的方法.分享给大家供大家参考.具体实现方法如下: 1.setTimeout和clearTimeout 进度条 .container{ width:450px; border ...
- nprogress.js 头部进度条使用方法
nprogress.js 头部进度条 引入CSS\JS <link rel="stylesheet" type="text/css" href=" ...
- iOS实现微信网页进度条,WKWebview进度条的实现
实现微信网页进度条或者说就是webview的加载进度条的效果,主要代码如下: 一.第一步,添加观察者 [_webViewaddObserver:selfforKeyPath:@"estima ...
- Android进度条/等待加载——旋转小圆点效果
进度条/等待加载--旋转小圆点效果 1 效果图 2.思想 12个小圆点叠放(i=0,1,-11) 动画一:依次从0度旋转到30i度 动画二:依次从30i度旋转到360度 因为不牵扯用户交互,所以用最基 ...
- [Android]webview直接加载网页允许JS，进度条，当前应用内跳转
webview,用于在应用里面直接加载网页 本代码参考了: 官方的webview实例介绍:https://developer.android.com/guide/tutorials/views/hel ...
- html进度条实现原理,js实现进度条
假如我有这样的一个代码: for(var i=0;i<100;i++) { for(var j=0;j<1 JS做的进度条,如何做的? js其实是没法计算到网页的加载进度的. 目前见到的打 ...
- js实现进度条的拖拽
目录 代码分析 搭建一个进度条 进度条的样式 js控制拖拽 js整体代码 代码分析 搭建一个进度条 html代码实现 <!-- 外部容器 --><div class="wr ...
- js 实现进度条，杠杆进度条，兼容pc移动端，滑块效果
效果图: 创作不易,请多点赞支持.本版本为jquery实现,如果你的项目是vue,那么可以按照如下实现的逻辑改版,也可以继续使用jquery实现. 代码: <!DOCTYPE html> ...
- HTML+CSS+JS实现 ❤️canvas圆形水波进度条动画特效❤️
最新文章
- 【Sql Server】DateBase-视图
- java jtable 单元格合并_JTable 单元格合并 【转】
- JavaScript 把字符串类型转换成日期类型
- 理解ASP.NET MVC Framework Action Filters（翻的）
- [Caffe]:关于*** Aborted at 1479432790 (unix time) try date -d @1479432790 错误的另一种原因
- Confluence 6 手动安装语言包和找到更多语言包
- 初探System.Threading.Channels
- oracle long转为string,实现全局拦截前端传入的Long类型id转String
- robot：根据条件主动判定用例失败或者通过
- 信息学奥赛一本通 1164：digit函数
- windows cmd 定义和使用变量
- 【Codeforces Global Round 2】A-E题解 【Frets On Fire、Pavel and Triangles】
- 怎样用计算机画太极,用IF函数画个太极图
- 数据结构第一章概论习题及答案
- flutter 基础知识点总结
- 对List集合中每个对象元素按时间顺序排序
- 麦克风声音太小别人听不到怎么办
- 概率论与数理统计 浙江大学 第27－34讲单元测验
- 2023软件测试工程师最全面试题
- 夜曲编程python_夜曲编程app免费版下载-百词斩夜曲编程下载v1.0.0安卓版-西西软件下载...