Как я могу инвертировать счет и установить время начала обратного отсчета?

Question

Этот JS-скрипт выполняет прогрессивный отсчет, начиная с нуля. Вместо этого я хотел бы, чтобы скрипт JS отсчитывал время с установленного времени (чч.мм.сс). Пожалуйста, что я должен изменить? Скрипт должен содержать localStorage и идентификатор startTime.

<div id="display-area"></div>

var timer;
var startTime;

function start() {
  startTime = parseInt(localStorage.getItem('startTime') || Date.now());
  localStorage.setItem('startTime', startTime);
  timer = setInterval(clockTick, 100);
}

function clockTick() {
  var currentTime = Date.now(),
    timeElapsed = new Date(currentTime - startTime),
    hours = timeElapsed.getUTCHours(),
    mins = timeElapsed.getUTCMinutes(),
    secs = timeElapsed.getUTCSeconds(),
    ms = timeElapsed.getUTCMilliseconds(),
    display = document.getElementById("display-area");

  display.innerHTML =
    (hours > 9 ? hours : "0" + hours) + ":" +
    (mins > 9 ? mins : "0" + mins) + ":" +
    (secs > 9 ? secs : "0" + secs);
};
start();

Таймер работает, но должен вести обратный отсчет от установленного времени.

Answer 1

Вы можете достичь таймера обратного отсчета, расширив вычисление clockTick() так, чтобы timeElapsed вычислялось как "время начала, минус количество времени, прошедшее с начала обратного отсчета" .

Вводя countdownDuration как currentTime - startTime, мы можем затем создать таймер отсчета, который отсчитывает от startTime до:

countdownDuration = currentTime - startTime
timeElapsed = startTime - countdownDuration

Это может быть введено в ваш код следующим образом:

function clockTick() {
      const currentTime = Date.now(),
        countdownDuration = currentTime - startTime,
        timeElapsed = new Date(startTime - countdownDuration),
        hours = timeElapsed.getUTCHours(),
        mins = timeElapsed.getUTCMinutes(),
        secs = timeElapsed.getUTCSeconds(),
        ms = timeElapsed.getUTCMilliseconds(),
        display = document.getElementById("display-area");

      display.innerHTML =
        (hours > 9 ? hours : "0" + hours) + ":" +
        (mins > 9 ? mins : "0" + mins) + ":" +
        (secs > 9 ? secs : "0" + secs);
};