Question

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

如何将其嵌入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>

以下是我正在从事的工作的链接：My Workspace

侧面说明：：我一直在尝试使进度条位于页面的中心，两边各有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

我看到您已经包含了引导程序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 个答案: