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

Question

我一直在玩下面的代码并使用它来创建响应某种类型的数据输入的进度条。 我正在使用的数据以数组的形式出现，但我注意到代码只创建了一个进度条。

我怎么能在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>

以下是我正在处理的内容的链接：我的工作区

margin: 200px ：我一直试图让进度条以页面为中心， margin: 200px左右。 我的CSS中的margin属性似乎没有这样做，只是在左边但不是右边应用margin - 我在哪里错了 ？

Answer 1

尝试这个

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

仅使用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;


 }

这将产生

Answer 2

我看到你已经包含了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;

它看起来好多了:)

如何使用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