带进度条的 24 小时倒数计时器

Question

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

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

如果可能的话，我希望有人能给我一些方向/提示，甚至是一些 sn-ps！谢谢！

(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;

计算进度条的宽度。