Question

我正在尝试使用JS Countdown Timer创建一个进度条，当它达到00 00 00 00时我需要它，进度条是100％，当此计数器及时关闭时，条形图将继续。谢谢！

目前的代码如下：

＆＃13;

// =================================================================================
// 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>";
}

＆＃13;

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

＆＃13;

Answer 1

我们不会在这里做你的工作。

研究，编写一些代码，如果遇到问题，可以在这里询问。

无论如何，您可以使用div轻松实现这一目标，根据需要调整大小（将宽度设置为您想要的宽度）并在其上设置边框。像这样：

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

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

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

使用JS Countdown Timer创建进度条

1 个答案: