Javascript进度条与console.log

javascript progress bar with console.log

本文关键字：console log Javascript      更新时间：2023-09-26

我想在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的进度值(数字)，并使用它来构建进度条?如果是，怎么做?提前感谢

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>

相关文章：