进度条无法正常工作

我正在尝试制作进度条，但它可以工作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>

来源

2017-08-25 shubham kapoor

在每一个你设定妇女参与发展到1次迭代，因此wid的值永远不会超过8. – Thijs

从for循环中移除它，并将其设置为befo re：'var wid; wid = 1;' – Kaddath

UI永远不会在for循环中更新。 – epascarello

我再次使用的功能，试试这个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>

来源

2017-08-25 15:37:06

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

来源

2017-08-25 14:35:22 zynkn

当容器是800，将wid设置为0并设置if（wid <800）{'to阻止 – Neil

@尼尔它只是示例代码..我很抱歉。我没有发现小错。但是，你可以改变正确的方式。 – zynkn

我知道，那只是OP，那甚至没有什么大不了的;） – Neil

结果。小节的大小通常根据任何应用程序事件而改变（在我的例子中超时）。我希望这有助于：

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>

来源

2017-08-25 14:56:45

进度条无法正常工作

回答

相关问题