js实现进度条

<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;
    }
}

function fakeProgress(v, el) {
    if (v >= 101)
        location.href="#";//跳转路径
    else {
        setSB(v, el, infor, "正在复制中……");
        window.setTimeout("fakeProgress(" + (v + 1) + ", document.all['" + el.id + "'])", 1000);
    }
}

</SCRIPT>

</HEAD>
<BODY onload=fakeProgress(0,sb)>
<!-- 
sb          底色
sbChild1    黑色
infor       信息
-->
<DIV align=center>
    <CENTER>
        <DIV align=center>
            <DIV id=sb style="BORDER-RIGHT: #ffffff 1px solid; BORDER-TOP: #ffffff 1px solid; BACKGROUND: #aaccff; 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>
    </CENTER>
</DIV> 
</BODY>
</HTML>

你可能感兴趣的:(js实现进度条)