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

根据您的计时器只需设置它的宽度。