网页载入进度条

最新推荐文章于 2025-08-08 14:20:26 发布

原创最新推荐文章于 2025-08-08 14:20:26 发布 · 972 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#div #function #button #filter #ie #html

该博客展示了一段HTML和JavaScript代码，利用document.all、document.getElementsByTagName等判断浏览器环境，通过定义setSB、setSBByStep、fakeProgress等函数，结合DIV元素和BUTTON元素，实现了加载进度条的功能，可显示加载中与加载完毕状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<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;
}
}
window.onload = new Function("setSB(100,sb,infor,'加载完毕')")

function fakeProgress(v, el) {
if (v >= 100)
setSB(100, el, infor, "加载完毕");
else {
setSB(v, el, infor, "加载中 ...");
window.setTimeout("fakeProgress(" + (v + 1) + ", document.all['" + el.id + "'])", 100);
}
}

//-->
</SCRIPT></head>
<body>
<DIV id=sb
style="BORDER-RIGHT: white 2px inset; BORDER-TOP: white 2px inset; BACKGROUND: white; BORDER-LEFT: white 2px inset; WIDTH: 200px; BORDER-BOTTOM: white 2px inset; HEIGHT: 20px; TEXT-ALIGN: left">
<DIV id=sbChild1
style="FILTER: Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=0); WIDTH: 0%; POSITION: absolute; HEIGHT: 16px">
<DIV
style="FONT-SIZE: 1px; BACKGROUND: highlight; WIDTH: 100%; HEIGHT: 100%"></DIV></DIV>
<DIV
style="FONT-SIZE: 12px; WIDTH: 100%; COLOR: black; FONT-FAMILY: arial; POSITION: absolute; TEXT-ALIGN: center">0%</DIV></DIV>

<div align="center"></div>
<DIV id=infor
style="FONT-SIZE: 12px; WIDTH: 100%; COLOR: white; FONT-FAMILY: arial; POSITION: relative; TEXT-ALIGN: center"></DIV>
<div align="center"><BR>
<BUTTON onclick="fakeProgress(0, sb)">again</BUTTON> </div>
<div align="center"></div>
<div align="center">
<SCRIPT type=text/javascript>
setSBByStep(10,sb,infor,'');
</SCRIPT>
</div>
</body>
</html>