用JS倒數計時器創建進度條

Question

我想用JS倒數計時器創建一個進度條，當它達到00 00 00 00時需要它，進度條是100％，當這個計數器是100％時間在下降。謝謝！

當前的代碼如下：

// ================================================================================= 
 
// Countdown Timer 
 
// ================================================================================= 
 

 
var ctd = document.getElementById("countdown"); 
 
countdown(); 
 
function countdown() { 
 
    // Contador ...... 
 
    var launch_date = new Date("9, 28, 2017 7:07:00"); 
 
    var days; 
 
    var hours; 
 
    var minutes; 
 
    var seconds; 
 
    var rest; 
 
    var now = new Date(); 
 
    seconds = rest = Math.floor((launch_date.getTime() - now.getTime())/1000); 
 
    days = zero(Math.floor(seconds/86400)); 
 
    seconds -= days * 86400; 
 
    hours = zero(Math.floor(seconds/3600)); 
 
    seconds -= hours * 3600; 
 
    minutes = zero(Math.floor(seconds/60)); 
 
    seconds -= minutes * 60; 
 
    seconds = zero(Math.floor(seconds)); 
 
    function zero(n) { 
 
    return (n < 10 ? "0" : false) + n; 
 
    } 
 
    rest <= 0 
 
    ? (days = hours = minutes = seconds = "00") 
 
    : setTimeout(countdown, 1000); 
 
    ctd.innerHTML = 
 
    '<li><div><span class="countnumber">' + 
 
    days + 
 
    "</span><br> Dia" + 
 
    (days > 1 ? "s" : "") + 
 
    "</div></li>" + 
 
    '<li><div><span class="countnumber">' + 
 
    hours + 
 
    "</span><br> Hora" + 
 
    (hours > 1 ? "s" : "") + 
 
    "</div></li>" + 
 
    '<li><div><span class="countnumber">' + 
 
    minutes + 
 
    "</span><br> Minuto" + 
 
    (minutes > 1 ? "s" : "") + 
 
    "</div></li>" + 
 
    '<li class="color"><div><span class="countnumber">' + 
 
    seconds + 
 
    "</span><br> Segundo" + 
 
    (seconds > 1 ? "s" : "") + 
 
    "</div></li>"; 
 
}

<div class="countdown"> 
 
    <ul id="countdown"></ul> 
 
</div>

Answer 1

我們不會做你的工作在這裏的SO。

研究，寫一些代碼，如果你有問題，你可以在這裏問。

無論如何，你可以很容易地實現，使用div，你調整你的需要（設置寬度，你想要多寬），並設置一個邊框。就像這樣：

.bar { 
 
    border-bottom: 2px solid green; 
 
}

<div class="bar" style="width: 200px;"></div> 
 
<br/> 
 
<div class="bar" style="width: 300px;"></div>

根據您的計時器只需設置它的寬度。