当用户在 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();

此功能是运行每秒（1000ms），因此时钟会在一秒后自行重置为当前时间，使用户选择时间消失。

有没有办法及时更新用户传递的时间，然后使用新时间继续计时？例如：

时钟显示为“12:00:00”，然后用户输入时间“13:30:00”，现在时钟从“13:30:01....13:30”继续滴答作响： 02....13:30:03...等等'.

非常感谢您的帮助！

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>

当用户在 JavaScript 中选择新时间时继续点击时钟

Continue a clicking clock when user chooses new time in JavaScript

javascript

date

settimeout

auto-increment

clock