Продолжайте нажимать на часы, когда пользователь выбирает новое время в JavaScript

Question

Я столкнулся с проблемой при создании часов с использованием Vanilla Javascript. Я получаю текущее время нормально, но я бы хотел, чтобы пользователь мог устанавливать свое время. Время, которое хочет пользователь, берется из трех полей ввода и передается как необязательные параметры (updateH,updateM,updateS) к функции ниже:

function updateTime(updateH,updateM,updateS){
    updateH = updateH || false; updateM = updateM || false; updateS = updateS || false;
    today = new Date();
    if (updateH != false || updateM != false || updateS != false) {
        today.setHours(updateH);
        today.setMinutes(updateM);
        today.setSeconds(updateS);
    }

    h = addLeadingZeroes(today.getHours());     //Today's time (hours)
    m = addLeadingZeroes(today.getMinutes());   //Today's time (minutes)
    s = addLeadingZeroes(today.getSeconds());   //Today's time (seconds)

    day = getDay().toUpperCase();               //Today's date (day)
    date = today.getaDmante();                  //Today's date (date)
    month = getMonth().toUpperCase();           //Today's date (month)
    time24H = h + ":" + m + ":" + s;

    drawWatch();

    setTimeout(updateTime, 1000);
}
updateTime();

Эта функция запускается каждую секунду (1000 мс), поэтому часы сбрасываются на текущее время через одну секунду, что делает выбор времени пользователя исчезающим.

Можно ли как-нибудь обновить время, прошедшее пользователем, а затем продолжить отсчет времени, используя новое время? НАПРИМЕР:

Часы показывают "12:00:00", затем пользователь вводит время "13:30:00", теперь часы продолжают тикать с "13:30:01....13:30:02...".13:30:03...ETC.

Большое спасибо за вашу помощь!

Answer 1

Когда пользователь устанавливает свое время, вычисляет разницу между его временем и текущим временем, сохраните это значение. Затем каждый раз, когда вы хотите перерисовать часы, просто получите новое текущее время, вычтите сохраненную разницу и перерисуйте часы.

Лично я хотел бы создать новый прототип под названием "Watch" и просто делать все, что вы хотите в этом объекте.

/* Create a "Watch" prototype */
function Watch(hours, minutes, seconds, drawInterval){
  var t = this;
  this.offset = 0;
  this.drawInterval = drawInterval || 1000;
  this.setTime = function(hours, minutes, seconds){
    var now = new Date().getTime();
    var theirTime = new Date();
    if(hours) theirTime.setHours(hours);
    if(minutes) theirTime.setMinutes(minutes);
    if(seconds) theirTime.setSeconds(seconds);
    this.offset = now - theirTime.getTime();
  };
  this.getTime = function(){
    var d = new Date( new Date() - this.offset );
    return d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();
  };
  this.draw = function(elementID){
    function draw(){
      
      document.getElementById(elementID).innerHTML = t.getTime();
      setTimeout(draw, t.drawInterval);
    };
    draw();
  };
  this.setTime(hours, minutes, seconds); // Initialize
}

/* Create an instance of the "Watch" prototype */
var W = new Watch();

/* Draw the watch to the DOM */
W.draw("watch");

/* Set the Users Time */
W.setTime(12,45,30); // 12:45:30

<div id='watch'></div>