使用console.log进行javascript进度条

Question

我试图在javascript中实现一个简单的实时进度条。

在功能运行期间，我保存这样的日志：

console.log(message);

然后它返回我：

 Object { status="working phase 1",  progress=0.014}
 Object { status="working phase 1",  progress=0.015}
 Object { status="working phase 2",  progress=4.5}
 Object { status="working phase 1",  progress=0.016}

依此类推，直至达到1.0（100％）（仅限第1阶段！）。有没有办法只捕获状态=阶段1的进度值（数量）并使用它来构建进度条？如果有，怎么样？提前致谢

Answer 1

＆＃13;

＆＃13;

function progress(phase, percentage) {
  var elem = document.getElementById(phase);
  var width = Math.floor(percentage * 100);
  if (width <= 100) {
    elem.style.width = width + '%';
    document.getElementById(phase + " label").innerHTML = width * 1 + '%';
  }
}



progress('phase 1', 0.01);
progress('phase 2', 0.10);
progress('phase 2', 0.20);
progress('phase 1', 0.05);
progress('phase 2', 0.30);
progress('phase 1', 0.55);

＆＃13;

/* If you want the label inside the progress bar */

.label {
  text-align: center;
  /* If you want to center it */
  line-height: 30px;
  /* Set the line-height to the same as the height of the progress bar container, to center it vertically */
  color: white;
}
.progress {
  position: relative;
  width: 100%;
  height: 30px;
  background-color: #ddd;
  margin-top: 5px;
  margin-bottom: 5px;
}
.bar {
  position: absolute;
  width: 10%;
  height: 100%;
  background-color: #4CAF50;
}

＆＃13;

<div class="progress">
  <div class='bar' id="phase 1">
    <div class="label" id="phase 1 label">10%</div>
  </div>
</div>
<div class='progress'>
  <div class='bar' id="phase 2">
    <div class="label" id="phase 2 label">10%</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;