與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

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>