document.write("<div id='divprogress' align='center' style='position: absolute; top: 300px; left: 100px;z-index: 900; display: none;'>");
document.write("<center>");
document.write(" <div align='center'>");
document.write(" <div id='sb' style='border-right: #ffffff 1px solid; border-top: #ffffff 1px solid;background: #aaccff; 400px; border-bottom: #cccccc 1px solid; height: 14px;text-align: left'>");
document.write(" <div id='sbChild1' style='filter: Alpha(Opacity=0, FinishOpacity=80, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=0);overflow: hidden; 100%; position: absolute; height: 12px'>");
document.write(" <div style='background: #000000; 100%; height: 12px; overflow: hidden'>");
document.write(" </div>");
document.write(" </div>");
document.write(" <div style='font-size: 10px; 400px; color: white; font-family: arial; position: absolute;height: 14px; text-align: center'>");
document.write(" </div>");
document.write(" </div>");
document.write(" <p></p>");
document.write(" <!-- 间距 -->");
document.write(" <div id='infor' style='font-size: 11px; 100%; color: #999999; font-family: arial;position: relative; height: 14px; text-align: center'>");
document.write(" </div>");
document.write(" </div>");
document.write("</center>");
document.write("</div>");
document.write("<div id='webBgLayerFG' style='position: absolute; top: 0px; left: 0px; z-index: 899;background-color: #ccc; height: 100%; 100%; display: none; -moz-opacity: 0.5;filter: alpha(opacity=60);'>");
document.write("</div>");
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 >= 99) {
// divprogress.style.display = "none";
// //location.href = "#"; //跳转路径
document.getElementById("divprogress").style.display="none";
document.getElementById("webBgLayerFG").style.display="none";
}
else {
divprogress.style.display = "block";
setSB(v, el, infor, " 数据处理中……");
var itime = 10;
if (v > 90)
itime = 100;
else if (v > 70)
itime = 25;
else if (v > 50)
itime = 10;
window.setTimeout("fakeProgress(" + (v + 1) + ", document.all['" + el.id + "'])", itime);
}
}
function showProgress() {
var ShopConfirmLayer = document.getElementById("divprogress");
var webBgLayerFG = document.getElementById("webBgLayerFG");
ShopConfirmLayer.style.display = "";
ShopConfirmLayer.style.left = parseInt((document.documentElement.scrollWidth - ShopConfirmLayer.offsetWidth) / 2) + document.documentElement.scrollLeft + "px";
ShopConfirmLayer.style.top = Math.abs(parseInt((document.documentElement.clientHeight - ShopConfirmLayer.offsetHeight) / 2)) + document.documentElement.scrollTop + "px";
webBgLayerFG.style.display = "";
webBgLayerFG.style.height = document.documentElement.clientHeight + "px";
webBgLayerFG.style.width = document.documentElement.clientWidth + "px";
fakeProgress(0, sb);
//loading(0,sb);
}
切换页面时 需要使用到进度条的页面:document.write("<center>");
document.write(" <div align='center'>");
document.write(" <div id='sb' style='border-right: #ffffff 1px solid; border-top: #ffffff 1px solid;background: #aaccff; 400px; border-bottom: #cccccc 1px solid; height: 14px;text-align: left'>");
document.write(" <div id='sbChild1' style='filter: Alpha(Opacity=0, FinishOpacity=80, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=0);overflow: hidden; 100%; position: absolute; height: 12px'>");
document.write(" <div style='background: #000000; 100%; height: 12px; overflow: hidden'>");
document.write(" </div>");
document.write(" </div>");
document.write(" <div style='font-size: 10px; 400px; color: white; font-family: arial; position: absolute;height: 14px; text-align: center'>");
document.write(" </div>");
document.write(" </div>");
document.write(" <p></p>");
document.write(" <!-- 间距 -->");
document.write(" <div id='infor' style='font-size: 11px; 100%; color: #999999; font-family: arial;position: relative; height: 14px; text-align: center'>");
document.write(" </div>");
document.write(" </div>");
document.write("</center>");
document.write("</div>");
document.write("<div id='webBgLayerFG' style='position: absolute; top: 0px; left: 0px; z-index: 899;background-color: #ccc; height: 100%; 100%; display: none; -moz-opacity: 0.5;filter: alpha(opacity=60);'>");
document.write("</div>");
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 >= 99) {
// divprogress.style.display = "none";
// //location.href = "#"; //跳转路径
document.getElementById("divprogress").style.display="none";
document.getElementById("webBgLayerFG").style.display="none";
}
else {
divprogress.style.display = "block";
setSB(v, el, infor, " 数据处理中……");
var itime = 10;
if (v > 90)
itime = 100;
else if (v > 70)
itime = 25;
else if (v > 50)
itime = 10;
window.setTimeout("fakeProgress(" + (v + 1) + ", document.all['" + el.id + "'])", itime);
}
}
function showProgress() {
var ShopConfirmLayer = document.getElementById("divprogress");
var webBgLayerFG = document.getElementById("webBgLayerFG");
ShopConfirmLayer.style.display = "";
ShopConfirmLayer.style.left = parseInt((document.documentElement.scrollWidth - ShopConfirmLayer.offsetWidth) / 2) + document.documentElement.scrollLeft + "px";
ShopConfirmLayer.style.top = Math.abs(parseInt((document.documentElement.clientHeight - ShopConfirmLayer.offsetHeight) / 2)) + document.documentElement.scrollTop + "px";
webBgLayerFG.style.display = "";
webBgLayerFG.style.height = document.documentElement.clientHeight + "px";
webBgLayerFG.style.width = document.documentElement.clientWidth + "px";
fakeProgress(0, sb);
//loading(0,sb);
}
1.HEAD导入JS文件
2.BODY追加事件 <body onbeforeunload="showProgress();">