html进度条动态,前端js实现动态更新进度条（重要）

进度条

.bgBar{

background: #FFFFFF;

font-family: Arial,Verdana;

border: 1px solid #000000;

font-size: 17;

font-weight: bold;

}

.bgBar div{

background: #DAECC8;

border: 1px solid #FFFFFF;

color:   #308040;

text-align: right;

overflow: hidden;

}

/****************************************************************************************/

//下面代码为进度条的封装

if (syj == null) var syj = {};

//进度条,parent进度条的父控件对象,width进度条的宽度,barClass进度条的css,display是否显示进度条

syj.ProgressBar=function(parent, width , barClass, display) {

this.parent=parent;

this.pixels = width;

this.parent.innerHTML="

this.outerDIV = this.parent.childNodes[0];

this.outerDIV.innerHTML="

this.fillDIV = this.outerDIV.childNodes[0];

this.fillDIV.innerHTML = "0";

this.fillDIV.style.width = "0px";

this.outerDIV.className = barClass;

this.outerDIV.style.width = (width + 2) + "px";

this.parent.style.display = display==false?'none':'';

}

//更新进度条进度 pct的值要介于0和1之间

syj.ProgressBar.prototype.setPercent = function(pct) {

var fillPixels;

if (pct < 1.0){

fillPixels = Math.round(this.pixels * pct);

}else {

pct = 1.0;

fillPixels = this.pixels;

}

this.fillDIV.innerHTML = Math.round(100 * pct) + "%";

this.fillDIV.style.width = fillPixels + "px";

}

//控制进度条的 显示/隐藏

syj.ProgressBar.prototype.display= function(v){

this.parent.style.display = v==true?'':'none';

}

//初始化进度条

function init(){

window.jtProBar = new syj.ProgressBar(document.getElementById("progressBar"), 600 , "bgBar");

}

/****************************************************************************************/

//下面代码为演示程序

//开始演示

function startAutoDemo(){

if(window.thread==null)

window.thread=window.setInterval("updatePercent()",60);

}

//停止演示

function stopAutoDemo(){

window.clearInterval(window.thread);

window.thread=null;

}                 //演示程序                 function updatePercent(){                     if(window.count==null)window.count=0;                      window.count=count%100                      jtProBar.setPercent(window.count/100);                      window.count++;                  }                 /****************************************************************************************/