How To Create A Javascript Clock With Custom Input Time?

So I'm trying to make a Javascript clock that can start at a custom time in the format of HH:MM:SS. The code below works fine, the clock ticks up and everything, but starts at the

Solution 1:

Consider what you're doing here (syntax changed for simplicity):

setInterval(clock, 1000);

Every second you are running the clock function. So when you have this:

var mytime = newDate();

Every second you will get the current date and time. So it changes every second. But when you have this:

var mytime = newDate(2011, 0, 1, 12, 33, 24, 567);

Every second you get a constant date and time. So it never changes. Thus, it always displays that same constant date and time.

Basically, you should be storing a single Date object and just adding a second to it every second. (Or, more accurately, calculate the difference between the current date, which naturally already had a second added, and the custom date. And update the value based on that difference.) Something more like this (untested, shown for structural changes only):

// store when the clock began tickingvar startDate = newDate();

functionclock() {

    // create the custom date, and add to it the difference// between when the clock started ticking and right nowvar diff = newDate().getTime() - startDate.getTime();
    var mytime = newDate(2011, 0, 1, 12, 33, 24, 567);
    mytime.setMilliseconds(mytime.getMilliseconds() + diff);

    var seconds = mytime.getSeconds();
    var minutes = mytime.getMinutes();
    var hours = mytime.getHours();

    var currentTime = hours + ":" + minutes + ":" + seconds;

    document.getElementById("Timer").firstChild.nodeValue = currentTime;

}

Solution 2:

The reason why the example you have ticks up is you are reading a new time on every iteration. When you hard code a time, the time will always be the same. If you want the time to increase, you will need to manually track how much time has elapsed and add that to the time you want to start at.

//get the start time the page loadsvar startTime = newDate();
functionclock() {

    //the time you want to start fromvar mytime = newDate(2011, 0, 1, 12, 33, 24, 567);
  
    ///calcualte the difference between the start and current timevar diff = newDate() - startTime;
  
    //add that difference to the offset time
    mytime.setMilliseconds(mytime.getMilliseconds() + diff);

    //Generate your outputvar seconds = mytime.getSeconds();
    var minutes = mytime.getMinutes();
    var hours = mytime.getHours();

    var currentTime = hours + ":" + minutes + ":" + seconds;

    document.getElementById("Timer").innerHTML = currentTime;

}

setInterval(clock, 1000);
clock();

<spanid="Timer">x<span>

Solution 3:

You're close - you want to pass the function by object reference to the setInterval method. When it's in quotes, and has the parentheses like you've got it, it's just treated as a string.

Here's a working fiddle: https://jsfiddle.net/687ts2zz/

var clock = function() {
  var mytime = newDate(),
      seconds = mytime.getSeconds(),
      minutes = mytime.getMinutes(),
      hours = mytime.getHours(),
      currentTime = hours + ":" + minutes + ":" + seconds;

  document.getElementById("Timer").firstChild.nodeValue = currentTime;
}
setInterval(clock, 1000);