javascript 进度条 console.log

Question

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

在函数运行期间，我正在这样保存日志：

console.log(message);

它returns我：

 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%)（仅限第一阶段！）。有没有办法只捕获 status = phase 1 的进度值（数字）并用它来构建进度条？如果是，如何？提前致谢

Answer 1

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

/* 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;
}

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

javascript 进度条 console.log

javascript progress bar with console.log

javascript

progress