24-часовой таймер обратного отсчета с индикатором выполнения

Question

Я работаю над приложением, чтобы помочь людям создать новые привычки или отказаться от старых. Для этого приложения я хочу иметь таймер обратного отсчета, который ведет обратный отсчет каждый день, благодаря этому посту Я получил это на работу, следующий шаг - добавить индикатор выполнения, который ведет обратный отсчет вместе с таймером ( так что в основном 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;

для расчета ширины вашего индикатора выполнения.