JSカウントダウンタイマーでプログレスバーを作成

Question

JSカウントダウンタイマーでプログレスバーを作成しようとしていますが、00時00分00秒になるとプログレスバーが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>

ちょうどあなたのタイマーに応じてその幅を設定します。