带有进度条的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>

Answer 2

您可以使用getTime（）函数来获取两个日期的黑白差的毫秒数。

例如

let diff = new Date("<future_date>").getTime() - new Date().getTime();

您可以使用diff值设置进度条样式（宽度或百分比或其他）。

Answer 3

另一个解决方案是添加：

  const totalSeconds = 24 * 60 * 60;

之后：

start.setHours(24,0,0)

然后添加：

document.getElementById('goal-time').style.width = ((remain / totalSeconds) * 100) + '%';

紧随其后：

document.getElementById('time').innerHTML = hh + ":" + mm + ":" + ss;

计算进度条的宽度。