Charkizard February 2016

Continue a clicking clock when user chooses new time in JavaScript

I've run into a problem whilst building a clock using Vanilla Javascript. I'm getting the current time fine but I would like the user to be able to set their own time. The time the user wants is grabbed from three input fields and passed in as optional paramters(updateH,updateM,updateS) to the below function:

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();

This function is ran every second (1000ms), therefore the clock resets itself to the current time after one second, making the users choice time dissapear.

Is there anyway to update the time to the user passed in time and then continue the clock ticking using the new time? E.G:

The clock reads '12:00:00', the user then enters the time '13:30:00', now the clock continues ticking from '13:30:01....13:30:02....13:30:03...ETC'.

Many thanks for your help!

Answers


Dustin Poissant February 2016

When the user sets the their time, calculate the difference between their time and the current time, store this value. Then each time you want to redraw the watch just get the new current time, subtract that stored difference and redraw the watch.

Personally I would create a new prototype called "Watch" and just do all the things you want within this object.

/* 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>

Post Status

Asked in February 2016
Viewed 1,539 times
Voted 12
Answered 1 times

Search




Leave an answer