JS实现的进度条

// 进度条
//<input type="button" value="start" onclick="processBar.changeMode();if(processBar.isMoving){this.value='Stop';}else{this.value='Start';}">
//---------------------------
//<script language="javascript" src="ProcessBar.js"></script>
//<input type="button" value="start" onclick="(new ProcessBar()).changeMode();">
//可实现方法:doProcessBarAction()
//---------------------------


function ProcessBar(){
    var divG =document.createElement("<div style=\"background: url('../image/0.gif') no-repeat;margin:0 auto;text-align:center;256px;height:18px;position:absolute;top:45%;left:40%;font-size:13px;z-index:1000;\"></div>");
    var proc =document.createElement("<div id='proc' style=\"background: url('../image/1.gif');position:absolute;top:0;left:0;0px;height:18px;font-size:13px;z-index:1000;\"></div>");
    var div2 =document.createElement("<div style='position:absolute;top:2;left:0;256px;height:18px;text-align:center;font-size:13px;background:transparent'>&nbsp;</div>");
    divG.appendChild(proc);
    //divG.appendChile(div2);
    document.body.appendChild(divG);
    document.execCommand("BackgroundImageCache",false,true);
    
    var obj = proc;
    this.isMoving = false;
    this.maxLength = parseInt(obj.parentNode.style.width.replace("px",""));
    this.nowLength = parseInt(obj.style.width.replace("px",""));
    this.moveInterval = 100;
    this.moveRange = 1;
    this.timer;
    this.obj = obj;

    ProcessBar.nowObj = this;  

   this.changeMode = function(){
                this.isMoving = !this.isMoving;
                
                if(this.isMoving){
                        createBgDiv(); //创建页面蒙版
                        this.timer = window.setInterval(ProcessBar.nowObj.moving, this.moveInterval);
                }else{
                        window.clearInterval(this.timer);
                }
   }

   this.moving = function(){
        ProcessBar.nowObj.nowLength += ProcessBar.nowObj.moveRange;
                ProcessBar.nowObj.obj.style.width = ProcessBar.nowObj.nowLength;

                //ProcessBar.nowObj.obj.parentNode.lastChild.firstChild.data = Math.ceil((ProcessBar.nowObj.nowLength/ProcessBar.nowObj.maxLength)*100) + "%";

                if(ProcessBar.nowObj.nowLength >= ProcessBar.nowObj.maxLength){
                        window.clearInterval(ProcessBar.nowObj.timer);
                        //ProcessBar.nowObj.obj.parentNode.lastChild.firstChild.data = "Complete!";
                        //执行事件
                        try{
                           doProcessBarAction();
                        }
                        catch(e)
                        {}
                        delBgDiv(); //清除页面蒙版
                }
   }
   
}

//var processBar = new ProcessBar(proc);

//页面蒙版
function createBgDiv()
{
    var h=document.body.clientHeight;
    var w=document.body.clientWidth;
    var div=document.createElement("<div id='divDialogBg' style='position:absolute;visibility:visible;background:gray;filter:alpha(opacity=30);z-index:1000;left:0;top:0;"+w+"px;height:"+h+"px;'></div>");
    //div.appendChild(document.createTextNode("xxxxxxxxxxxxxxxxxxxx"));
    document.body.appendChild(div);        
}
function delBgDiv()
{
    document.body.removeChild(document.getElementById("divDialogBg"));        
}