Question

您好我想尝试显示多个进度条。下面是代码片段

function Progressbar(id){
   this.id=id;
   this.width=0;
   this.progressInterval=0;
   this.showProgress=function(){
     this.width+=20;
     console.log(this.width);
     console.log(this.id);
     document.getElementById(this.id).style.width=this.width + 'px';
     document.getElementById(this.id).innerHTML=this.width + '%';
     if(this.width==100){
       clearTimeout(this.progressInterval);
     }else{
       this.progressInterval=setTimeout(this.showProgress,1000);
     }
   }
}

这里id是进度条的id。我使用oop，因为函数showProgress将在相同或不同的时间被多次调用。这里的问题是只有第一次调用函数时才会得到this.width的值为20而this.id =＆＃34; someID＆＃34;但后来我认为它是null。如果在某处出错，请纠正我。

Answer 1

 function Progressbar(id){
  var that=this;
  this.id=id;
  this.width=0;
  this.progressInterval=0;
  this.showProgress=function(){
     that.width+=20;
     document.getElementById(that.id).style.width=that.width + 'px';
     document.getElementById(that.id).innerHTML=that.width + '%';
     if(that.width==100){
        clearTimeout(that.progressInterval);
     }else{
     that.progressInterval=setTimeout(that.showProgress,1000);
   }
 }

}

将此的引用保存在变量

中

javascript中的多个进度条

1 个答案: