javascript - 带进度条的 24 小时倒计时器

Question

我正在开发一个应用程序来帮助人们养成新习惯或放弃旧习惯。对于这个应用程序，我想要一个每天倒计时的倒计时器，感谢 this post我让它工作了，下一步是添加一个进度条，它与计时器一起倒计时(所以基本上 00:00 = 满进度条，23:59 = 空进度条)。

我到处都在寻找，但我似乎无法弄清楚，甚至无法开始使用它。我希望看到#goal-time减少。

如果可能的话，我希望有人能给我一些方向/提示，甚至一些片段!谢谢!

(function() {
  var start = new Date;
  start.setHours(24, 0, 0); //hh:mm:ss

  function pad(num) {
    return ("0" + parseInt(num)).substr(-2);
  }

  function tick() {
    var now = new Date;
    if (now > start) { // too late, go to tomorrow
      start.setDate(start.getDate() + 1);
    }
    var remain = ((start - now) / 1000);
    var hh = pad((remain / 60 / 60) % 60);
    var mm = pad((remain / 60) % 60);
    var ss = pad(remain % 60);
    document.getElementById('time').innerHTML = hh + ":" + mm + ":" + ss;
    setTimeout(tick, 1000);
  }

  document.addEventListener('DOMContentLoaded', tick);
})();

.goal-progress {
  border-color: black;
  border-style: solid;
  border-width: thick;
  height: 80px;
  margin-top: 50px;
  margin-left: 20px;
  margin-right: 20px;
  background-color: black;
}

#time {
  float: right;
  line-height: 80px;
  margin-right: 20px;
  background-color: black;
  color: white;
  mix-blend-mode: difference;
}

.goal-time-container {
  height: 80px;
  background-color: white;
  margin-left: 115px;
}

#goal-time {
  background-color: black;
  height: 80px;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="goal-progress">
  <div id="time"></div>
  <!-- time countdown -->
  <div id="img"></div>
  <div class="goal-time-container">
    <!-- container of the progress bar -->
    <div id="goal-time"></div>
    <!-- soon to (hopefully) be progress bar -->
  </div>
</div>

Answer 1

要实现此目的，您可以获取 remain 变量中保存的秒数，并使用它们计算出一天中剩余秒数的百分比 86400，然后将该百分比设置为进度条的宽度:

(function() {
  var start = new Date;
  start.setHours(24, 0, 0); //hh:mm:ss

  function pad(num) {
    return ("0" + parseInt(num)).substr(-2);
  }

  function tick() {
    var now = new Date;
    if (now > start) { // too late, go to tomorrow
      start.setDate(start.getDate() + 1);
    }
    var remain = ((start - now) / 1000);
    var hh = pad((remain / 60 / 60) % 60);
    var mm = pad((remain / 60) % 60);
    var ss = pad(remain % 60);
    document.getElementById('time').innerHTML = hh + ":" + mm + ":" + ss;
    
    // bar width calulation:
    var pc = remain * (100 / 86400);
    document.querySelector('#goal-time').style.width = pc + '%';
    
    setTimeout(tick, 1000);
  }

  document.addEventListener('DOMContentLoaded', tick);
})();

.goal-progress {
  border: 5px solid #000;
  height: 80px;
  margin: 50px 20px 20px 0;
  background-color: black;
}

#time {
  float: right;
  line-height: 80px;
  margin-right: 20px;
  background-color: black;
  color: white;
  mix-blend-mode: difference;
}

.goal-time-container {
  height: 80px;
  background-color: white;
  margin-left: 115px;
}

#goal-time {
  background-color: black;
  height: 80px;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="goal-progress">
  <div id="time"></div>
  <div id="img"></div>
  <div class="goal-time-container">
    <div id="goal-time"></div>
  </div>
</div>