2017-08-25 99 views
0

我正在嘗試製作進度條,但它可以工作PLZ解決它。 我使用的if else增加寬度,但它不工作進度條無法正常工作

var x = document.getElementById("p_bar"); 
 

 
for(var i = 0; i < 100; i++) { 
 
    var wid; 
 
    wid=1; 
 
    if(wid == 800) 
 
    break; 
 
    else 
 
    wid+=8; \t 
 
    x.style.width=wid+"px"; 
 
} 
 
\t \t 
 
document.body.style.background = "#"+((1<<24)*Math.random()|0).toString(16);
#cont { 
 
    width: 800px; 
 
    height: 30px; 
 
    background-color: cornsilk; 
 
    position: relative; 
 
} 
 

 
#p_bar { 
 
    width: 8px; 
 
    height: 30px; 
 
    background-color: red; 
 
    position: absolute; 
 
}
<div id="cont"> 
 
    <div id="p_bar"></div> 
 
</div> 
 
<p id="write"></p>

+3

在每一個你設定婦女參與發展到1次迭代,因此wid的值永遠不會超過8. – Thijs

+0

從for循環中移除它,並將其設置爲befo re:'var wid; wid = 1;' – Kaddath

+1

UI永遠不會在for循環中更新。 – epascarello

回答

0

我再次使用的功能,試試這個shubham寫道:

var x = document.getElementById('p_bar'); 
 
var container = document.getElementById('cont'); 
 
var write = document.getElementById('write'); 
 

 
var containerWidth = container.offsetWidth; 
 
var currentWidth = x.offsetWidth; 
 

 
var compeleteProgress = function (step, every) { 
 
\t currentWidth = Math.min(currentWidth + step, containerWidth); 
 
\t write.innerHTML = Math.floor((currentWidth/containerWidth) * 100) + '%' // Priniting percentage 
 
\t x.style.width = currentWidth + 'px' 
 
\t if (currentWidth < containerWidth) setTimeout(function() { 
 
\t \t compeleteProgress(step, every) 
 
\t }, every) 
 
} 
 

 
compeleteProgress(8, 300) // When you call this function, everything starts 
 
\t \t 
 
document.body.style.background = "#"+((1<<24)*Math.random()|0).toString(16);
#cont{ 
 
\t width: 800px; 
 
\t height: 30px; 
 
\t background-color: cornsilk; 
 
\t position: relative; 
 
} 
 
#p_bar{ 
 
\t width: 8px; 
 
\t height: 30px; 
 
\t background-color: red; 
 
\t position: absolute; \t 
 
}
<div id="cont"> 
 
\t <div id="p_bar"></div> 
 
</div> 
 
<p id="write"></p>

3

var x=document.getElementById("p_bar"); 
 
var wid = 1; 
 

 
var it = setInterval(function(){ 
 

 
    if(wid <= 800){ 
 
     wid+=8; 
 
     x.style.width=wid+"px"; 
 
    }else{ 
 
    clearInterval(it); 
 
    } 
 

 
}, 1000); 
 

 
\t \t 
 
document.body.style.background = "#"+((1<<24)*Math.random()|0).toString(16);
#cont{ 
 
\t width: 800px; 
 
\t height: 30px; 
 
\t background-color: cornsilk; 
 
\t position: relative; 
 
} 
 
#p_bar{ 
 
\t width: 8px; 
 
\t height: 30px; 
 
\t background-color: red; 
 
\t position: absolute; 
 
\t 
 
} 
 
\t
<div id="cont"> 
 
\t <div id="p_bar"></div></div> 
 
\t <p id="write"></p>

如果你想看到移動的進度條,您應該使用setInterval()

如果您僅使用for,則看不到任何動畫。

因爲,電腦的計算是如此之快,所以你可以看到只有我不知道哪些行爲你真正期望的for

+0

當容器是800,將wid設置爲0並設置if(wid <800){'to阻止 – Neil

+0

@尼爾它只是示例代碼..我很抱歉。我沒有發現小錯。但是,你可以改變正確的方式。 – zynkn

+0

我知道,那只是OP,那甚至沒有什麼大不了的;) – Neil

0

結果。小節的大小通常根據任何應用程序事件而改變(在我的例子中超時)。我希望這有助於:

document.body.style.background = "#"+((1<<24)*Math.random()|0).toString(16); 
 
    
 
var setBarWidthInPercent = function(barId, value){ 
 
    \t var bar=document.getElementById(barId); 
 
    bar.style.width = value+"%"; 
 
} 
 
    
 
setTimeout(function(){ 
 
    \t setBarWidthInPercent("p_bar",10) 
 
},500) 
 
    
 
setTimeout(function(){ 
 
    \t setBarWidthInPercent("p_bar",50) 
 
},1500) 
 
    
 
setTimeout(function(){ 
 
    \t setBarWidthInPercent("p_bar",100) 
 
},3000)
#cont{ 
 
\t width: 800px; 
 
\t height: 30px; 
 
\t background-color: cornsilk; 
 
\t position: relative; 
 
} 
 
#p_bar{ 
 
\t width: 8px; 
 
\t height: 30px; 
 
\t background-color: red; 
 
\t position: absolute; 
 
\t -webkit-transition: width 1s ease-in-out; 
 
    -moz-transition: width 1s ease-in-out; 
 
    -o-transition: width 1s ease-in-out; 
 
    transition: width 1s ease-in-out; 
 
}
<div id="cont"> 
 
\t <div id="p_bar"></div></div> 
 
\t <p id="write"></p>