Процент времени, оставшегося с двумя указанными метками времени. Javascript

Question

У меня есть два Date() раза, и я пытаюсь использовать разницу между ними, чтобы установить ширину индикатора выполнения, уменьшающуюся от 100% до 0%, когда разницы больше нет, но яЯ получаю действительно странные результаты.

Вот как я пытаюсь сделать это в настоящее время (в React его разделяют на несколько различных функций, поэтому я просто включу соответствующий код):

Сначала я устанавливаю целевое значение даты и времени, которое устанавливает endDate на вершину часа в течение следующих 24 часов (например, в 10 вечера) ...

this.endDate = new Date();

if (this.props.data.end_hr === 0) {
    this.endDate.setHours(24, 0, 0, 0);
} else {
    this.endDate.setHours(this.props.data.end_hr);
}
this.endDate.setMinutes(0);
this.endDate.setSeconds(0);

this.countdown = setInterval(this.timeRemaining, 1000);

Затем в timeRemaining функция, которая срабатывает каждую секунду, я получаю текущую дату и время и вычисляю разницу между ними.Наконец, я пытаюсь определить процентное значение для отправки в свойство css width индикатора выполнения ...

let now = new Date().getTime();
let diff = this.endDate - now;

let percent =
  Math.round(((diff / this.endDate) * 100000000 * 2) / 100) + '%';

this.countdownProgress.style.width = percent;

Значение diff на 100% верно, но процентное значение неверно.

Я пробовал разные способы вычисления процента, который мог придумать, но ничего не работало, как ожидалось, метод, описанный выше, был самым близким, который я мог получить.

Может кто-нибудь показать мне, где я иду не так, пожалуйста?

Редактировать : @ Ответ Данцигера реализован так, как я хочу его использовать.Это устанавливает время начала в 22:00 и время окончания в полночь.

Оказывается, это работает правильно, поэтому у меня должно быть что-то еще в моем коде, вызывающее проблему.Еще раз спасибо Данцигеру за то, что он показал мне свет!

const progressBar = document.getElementById('progressBar');
const progressText = document.getElementById('progressText');

const startDate = new Date();
startDate.setHours(22);
startDate.setMinutes(0);
startDate.setSeconds(0);

const endDate = new Date();
endDate.setHours(24,0,0,0);
endDate.setMinutes(0);
endDate.setSeconds(0);

const range = endDate - startDate;

function updateCountdown() {
  const diff = Math.max(0, endDate - new Date());
  
  progressBar.style.width = `${ 100 * diff / range }%`;
  progressText.innerText = `${ `000${ Math.ceil(diff / 1000) }`.slice(-4) } seconds`
  
  if (diff >= 0) {
    requestAnimationFrame(updateCountdown);
  }  
}

updateCountdown();

body {
  font-family: monospace;
}

.progressBar__base {
  position: relative;
  height: 32px;
  border: 3px solid black;
  margin: 0 0 8px;
}

.progressBar__progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: blue;
}

<div class="progressBar__base">
  <div class="progressBar__progress" id="progressBar"></div>
</div>

<div id="progressText"></div>

Answer 1

Вам нужно разделить diff на некоторый диапазон, в данном случае разницу во времени, которая была у вас изначально (что является ее максимальным значением), а не на endDate:

const progressBarDescending = document.getElementById('progressBarDescending');
const progressBarAscending = document.getElementById('progressBarAscending');
const progressTextDescending = document.getElementById('progressTextDescending');
const progressTextAscending = document.getElementById('progressTextAscending');

const startDate = new Date();
const endDate = new Date(startDate.getTime() + 10000); // + 10 seconds
const range = endDate - startDate;

function updateCountdown() {
  const diff = Math.max(0, endDate - new Date());
  
  progressBarDescending.style.width = `${ 100 * diff / range }%`;
  progressBarAscending.style.width = `${ 100 - 100 * diff / range }%`;
  
  progressTextDescending.innerText = `${ `000${ Math.ceil(diff / 1000) }`.slice(-4) } seconds left`;
  progressTextAscending.innerText = `${ `000${ Math.floor((range - diff) / 1000) }`.slice(-4) } seconds elapsed`;
  
  if (diff >= 0) {
    requestAnimationFrame(updateCountdown);
  }  
}

updateCountdown();

body {
  font-family: monospace;
}

.progressBar__base {
  position: relative;
  height: 32px;
  border: 3px solid black;
  margin: 16px 0 8px;
}

.progressBar__progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: blue;
}

<div class="progressBar__base">
  <div class="progressBar__progress" id="progressBarDescending"></div>
</div>

<div id="progressTextDescending"></div>

<div class="progressBar__base">
  <div class="progressBar__progress" id="progressBarAscending"></div>
</div>

<div id="progressTextAscending"></div>

Итак, допустим, вы начинаете этот отсчет с startDate = 5 и endDate = 15, поэтому ваш range = 10.

Если вы хотите обновить diff через 5 секунд, это будет diff = endDate - now = endDate - 10 = 5.Тогда progress = 100 * diff / range = 100 * 5 / 10, не progress = 100 * diff / endDate = 100 * 5 / 15.

Answer 2

Я думаю, что ваша проблема в том, что у вас нет определенного startTime для использования в качестве ссылки, и вместо этого вы используете now.

Если бы у вас было startTime, вы бы сделали:

let now = new Date().getTime();
let totalTime = endTime - startTime;
let progress = now - startTime;
let percentage = (progress / totalTime) * 100;

Я на самом деле не уверен, какое значение вы получите по вашим собственным расчетам.