html結合javascript實現的進度條

html部分的代碼

<table>
            <tr>
            <td width=80 align=right>執行進度</td>
            <td width=200 height=20>
                <fieldset style="background:#eeeeee" id=fieldBar>
                    <table id=proccessBar cellSpacing="0" cellPadding="0" border=0>
                        <tr height="10">
                            <td width=1></td>
                        </tr>
                    </table>
                </fieldset>
            </td>
            </tr>
        </table>
<input type="button" value="列    印" id="rpt" name="rpt1" onclick="showrpt()">&nbsp;&nbsp;
<input type="button" value="返    回" id="exitbutton" name="exitbutton" onclick="window.close();">

javascript部分的代碼

function showrpt()
{
    var nodes=checkdoc.selectNodes("//option");
    if (nodes==null || nodes.length==0){alert('無任何紀錄!');return;}
    rpt.disabled=true;
    len=nodes.length+1
    proccessBar.childNodes(0).childNodes(0).childNodes(0).width=parseInt(200/len,10)
    for (var i=1;i<len;i++)
    {
        proccessBar.childNodes(0).childNodes(0).appendChild(proccessBar.childNodes(0).childNodes(0).childNodes(0).cloneNode(0))
    }
    lnodes=checkdoc.selectNodes("//option");
    count=0
    filename=(new Date()).getTime()
    start();
}

function start(){
   if(count<len-1){
    var ipport=lnodes(count).getAttribute("ip")
    var compid=lnodes(count).getAttribute("compid")
    var compdesc=lnodes(count).getAttribute("compdesc")
    var compname=lnodes(count).getAttribute("compname")
    var today=new Date();
    xmlhttp1.Open("POST","amcxlstoreXML.asp?compname="+compname+"&filename="+filename+"&ipport="+ipport+"&compid="+compid+"&compdesc="+compdesc+"&now="+today+"&fpartno="+fpartno.value +"&tpartno="+tpartno.value +"&fpartdesc="+fpartdesc.value +"&fvendno="+fvendno.value +"&tvendno="+tvendno.value + "&fvendname="+fvendname.value +"&fppartno="+fppartno.value +"&tppartno="+tppartno.value+ "&fstoretype="+fstoretype.value +"&tstoretype="+tstoretype.value, false);
    xmlhttp1.Send();
    var strres=xmlhttp1.responseText
    if(strres.substring(0,2)=="ok")
    {
        proccessBar.childNodes(0).childNodes(0).childNodes(parseInt(count,10)).style.background="blue"
        complist=complist+strres.substring(2,strres.length)+"|"
    }else{
        proccessBar.childNodes(0).childNodes(0).childNodes(parseInt(count,10)).style.background="blue"
        alert("無法從"+compdesc+"的帳別"+compid+"取得數據!"+"\n錯誤代碼:"+strres)
        }
    count=count+1
    setTimeout("start()",50)
    }else{
    setTimeout("getXML()",50)
    }
    
}

function getXML(){
    var today=new Date();
    xmlhttp1.Open("POST","amcgetstanXML.asp?tempfile="+filename+"&stanfile=amcxlstore&now="+today, false);
    xmlhttp1.Send();
    var strres=xmlhttp1.responseText;
    if(strres.substring(0,2)=="ok"){
        proccessBar.childNodes(0).childNodes(0).childNodes(parseInt(len-1,10)).style.background="blue"
    }else{
        alert("轉換xml文件失敗!"+"\n錯誤代碼:"+strres);
        return
    }
    //alert(complist);return;
    window.showModalDialog("amcsqlsearchrpt.asp?rptfile=amcxlstore.rpt&para1="+complist+"&now="+today,null,"status=0;dialogHeight="+window.screen.availHeight+"px;dialogwidth=1500 px;dialogtop=0;dialogleft=0;help=0");
}

在上面的三個javascript方法中showrpt最先被觸發,執行到start中時,將依次填充進度條,根據任務的次數len(len既是任務的次數,也表示進度條的步進刻度),以及記數器count來判斷是否循環執行start來繼續填充進度條或執行最後一步getXML.
其效果如下圖