进度条不起作用

Question

我正在尝试取得进展，但它可以解决它。 我正在使用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;	
  x.style.width=wid+"px";
}
		
 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>

Answer 1

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);

		
 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>

如果您想查看移动进度条，则应使用setInterval()。

如果仅使用for，则无法看到任何动画。

因为，计算机的计算速度太快，所以你只能看到for的结果

Answer 2

我不确定你真正期望的是什么行为。条形大小通常根据任何应用程序事件（在我的示例中由超时）更改。我希望这会有所帮助：

 document.body.style.background = "#"+((1<<24)*Math.random()|0).toString(16);
 
 var setBarWidthInPercent = function(barId, value){
 	var bar=document.getElementById(barId);
  bar.style.width = value+"%";
 } 
 
 setTimeout(function(){
 	setBarWidthInPercent("p_bar",10)
 },500)
 
 setTimeout(function(){
 	setBarWidthInPercent("p_bar",50)
 },1500)
 
 setTimeout(function(){
 	setBarWidthInPercent("p_bar",100)
 },3000)

#cont{
	width: 800px;
	height: 30px;
	background-color: cornsilk;
	position: relative;
}
#p_bar{
	width: 8px;
	height: 30px;
	background-color: red;
	position: absolute;
	-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">
	<div id="p_bar"></div></div>
	<p id="write"></p>

Answer 3

我使用函数再次编写它，试试这个shubham：

＆＃13;

＆＃13;

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) {
	currentWidth = Math.min(currentWidth + step, containerWidth);
	write.innerHTML = Math.floor((currentWidth / containerWidth) * 100) + '%' // Priniting percentage
	x.style.width = currentWidth + 'px'
	if (currentWidth < containerWidth) setTimeout(function () {
		compeleteProgress(step, every)
	}, every)
}

compeleteProgress(8, 300) // When you call this function, everything starts
		
document.body.style.background = "#"+((1<<24)*Math.random()|0).toString(16);

＆＃13;

#cont{
	width: 800px;
	height: 30px;
	background-color: cornsilk;
	position: relative;
}
#p_bar{
	width: 8px;
	height: 30px;
	background-color: red;
	position: absolute;	
}

＆＃13;

<div id="cont">
	<div id="p_bar"></div>
</div>
<p id="write"></p>

＆＃13;

＆＃13;

＆＃13;