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>中加入:onload=fakeProgress(0,sb)
<BODY onload=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>


本文转自寒意博客园博客,原文链接:http://www.cnblogs.com/hnyei/archive/2011/10/14/2211127.html,如需转载请自行联系原作者

相关文章
|
1月前
|
数据采集 Web App开发 JavaScript
JavaScript爬虫进阶攻略:从网页采集到数据可视化
JavaScript爬虫进阶攻略:从网页采集到数据可视化
|
1月前
|
移动开发 前端开发 JavaScript
编程笔记 html5&css&js 005 网页上都有哪内容、形式和操作
编程笔记 html5&css&js 005 网页上都有哪内容、形式和操作
|
3月前
|
前端开发 JavaScript
百度搜索:蓝易云【用JavaScript和HTML实现一个精美的计算器网页】
该计算器网页使用HTML定义了页面结构,CSS样式使其具有精美的外观,而JavaScript脚本实现了计算器的逻辑。用户可以通过按钮输入数字和操作符,并通过“=”按钮来进行计算,计算结果会显示在文本框中。
40 6
|
3月前
|
JavaScript 前端开发 算法
JavaScript实现网页关灯效果
JavaScript实现网页关灯效果
25 0
|
4月前
|
前端开发 JavaScript
前端js代码一句话模拟Ctrl+A全选网页内容效果document.execCommand(‘selectAll‘);
前端js代码一句话模拟Ctrl+A全选网页内容效果document.execCommand(‘selectAll‘);
|
1月前
|
数据采集 JSON JavaScript
如何处理动态网页(例如使用 JavaScript 生成的内容)?
如何处理动态网页(例如使用 JavaScript 生成的内容)?
14 0
|
1月前
|
JavaScript 前端开发 UED
JS自动跳转手机移动网页
JS自动跳转手机移动网页
454 0
|
1月前
|
前端开发 JavaScript 开发者
编程笔记 html5&css&js 014 网页布局框架
编程笔记 html5&css&js 014 网页布局框架
|
1月前
|
前端开发 搜索推荐 JavaScript
编程笔记 html5&css&js 001 学习编程从网页开始
编程笔记 html5&css&js 001 学习编程从网页开始
|
2月前
|
前端开发 JavaScript API
网页开发者必看!5种JS跳转页面技巧,提升用户交互体验
欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者,我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新,为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念,并提供实际案例和练习,让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具,我们都将为你提供丰富的内容和实用技巧,帮助你更好地理解并运用前端开发中的各种技术。