Question

我正在尝试创建一个多色progress bar，我想用增量百分比值和相应颜色显示进度。

我可以从JSON获取数据并绘制progress bar，但setInterval功能不起作用。

目前我在for循环中编写setInterval函数。因为那可能是它不起作用。

请帮我解决这个问题，如果有任何其他方法，请告诉我。

    <!DOCTYPE html>
<html>

  <head>
    <title></title>
    <style type="text/css">
      #dist_bar {
        height: 30px;
        width: 100%;
        border: 1px solid #222;
        position: relative;
        margin: auto;
      }

    </style>
  </head>

  <body>
    <div id="dist_bar"></div>

    <script type="text/javascript">
      var json_data = [

        {
          "color": "red",
          "percentage": 30,
          "speed": 10,

        }, {
          "color": "yellow",
          "percentage": 20,
          "speed": 10,

        }

      ]


      function draw_ProgressBar(parms) {

        var arrayLength = json_data.length;
        var progress = setInterval(progress, 1000);
        var i = 0;
        for (var i = 0; i < arrayLength; i++) {
          var docid = document.getElementById('dist_bar');
          var innerDiv = document.createElement('div');
          innerDiv.id = 'dist' + i;
          dist_bar.appendChild(innerDiv);

          innerDiv.style.height = "30px";
          innerDiv.style.float = "left";
          innerDiv.style.backgroundColor = json_data[i].color;

          var p = 0; //var percent = '';
          var percent = json_data[i].percentage;
          var inc = setInterval(progress,10);
          (function progress(i) {

          if (p != percent) {

            for (var j = 0; j < percent; j++) {
              p++;
              var val = document.getElementById('dist' + i);
              val.innerHTML = p + "%";
              val.style.width = p + "%";
            }
          } else {

            clearInterval(progress);
          }
        }(i));
      } 
  }draw_ProgressBar(json_data)

    </script>
  </body>

</html>

我应该如何使多彩多姿的进度条工作？

0 个答案: