如何使用for循环创建多个进度条？

Question

I've been playing around with the code below and using it to create a progress bar that responds to a certain type of data input. 我一直在玩下面的代码并使用它来创建响应某种类型的数据输入的进度条。 The data I'm using comes in the form of an array but I've noticed that the code only creates one progress bar. 我正在使用的数据以数组的形式出现，但我注意到代码只创建了一个进度条。

How could I embed this within my for loop so that it creates a separate progress bar for each item in the array? 我怎么能在for循环中嵌入这个for以便为数组中的每个项创建一个单独的进度条 ？

 function move() { var elem = document.getElementById("myBar"); var width = 0; var id = setInterval(frame, 2000); function frame() { if (width >= 100) { clearInterval(id); } else { width=width + 10; elem.style.width = width + '%'; elem.innerHTML = ((100 - width)/10) + ' mins'; } } } move();

 #myProgress { width: 80%; background-color: #ddd; horizontal-align: center; } #myBar { width: 0%; height: 30px; background-color: #4CAF50; text-align: center; line-height: 30px; color: white; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div id="myProgress"> <div id="myBar"></div> </div> </body>

Here is the link to what I'm working on: My Workspace 以下是我正在处理的内容的链接：我的工作区

Side Note: I've been trying to get the progress bar to be centered on the page with a margin: 200px on either side. margin: 200px ：我一直试图让进度条以页面为中心， margin: 200px左右。 The margin attribute in my CSS doesn't seem to be doing this and only applying the margin to the left but not to the right - where am I going wrong with this ? 我的CSS中的margin属性似乎没有这样做，只是在左边但不是右边应用margin - 我在哪里错了 ？

Answer 1

Try this 尝试这个

<html>
<style>
 #myProgress {
 width: 100%;
 background-color: #ddd;
}

 .myBar {
  width: 10%;
  height: 30px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 30px;
  color: white;
 }
 </style>
<body>



<div id="myProgress">

</div>

 </body>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
 </script>
 <script>
  $(document).ready(function(){
  var progressbars="";
  var i;
  for (i = 1; i <=10; i++) { 
  progressbars+="<div class='myBar' style='width:"+i+"%'"
   + " id='myBar"+i+"px'"
   +">"+i+"%"+"</div><br/>";
  }

  $("#myProgress").html(progressbars);
  });

   </script>
   </html>

Using Javascript Only Just replace previous script with this 仅使用Javascript只需用此替换以前的脚本即可

 <script>
  window.onload=function(){
 var progressbars="";
  var i;
  for (i = 1; i <=10; i++) { 
    progressbars+="<div class='myBar' style='width:"+i+"%'"
   + " id='myBar"+i+"px'"
    +">"+i+"%"+"</div><br/>";
  }
   document.getElementById("myProgress").innerHTML=progressbars;


 }

This will generate 这将产生

Answer 2

I see that you have included bootstrap 4 In that case you can create progress bars with Bootstrap 我看到你已经包含了bootstrap 4在这种情况下你可以使用Bootstrap创建进度条

var progressbars="";
  for (var i = 1; i <=10; i++) { 
    progressbars+='<div class="progress">'
        +'<div class="progress-bar" role="progressbar" style="width: '+i+'%" aria-valuenow="'+i+'" aria-valuemin="0" aria-valuemax="100">'+i+'%</div>'
    +'</div>';
  }
   document.querySelector(".feefo").innerHTML=progressbars;

And it looks a lot nicer :) 它看起来好多了:)

如何使用for循环创建多个进度条？

问题描述

2 个解决方案

解决方案1
3 2018-08-17 10:20:44

解决方案2
0 2018-08-17 12:13:51

如何使用for循环创建多个进度条？

问题描述

2 个解决方案

解决方案1 3 2018-08-17 10:20:44

解决方案2 0 2018-08-17 12:13:51

解决方案1
3 2018-08-17 10:20:44

解决方案2
0 2018-08-17 12:13:51