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 = new Date();

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

var mytime = new Date(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 ticking
var startDate = new Date();

function clock() {

    // create the custom date, and add to it the difference
    // between when the clock started ticking and right now
    var diff = new Date().getTime() - startDate.getTime();
    var mytime = new Date(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 loads
var startTime = new Date();
function clock() {

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

    //Generate your output
    var 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();

<span id="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 = new Date(),
      seconds = mytime.getSeconds(),
      minutes = mytime.getMinutes(),
      hours = mytime.getHours(),
      currentTime = hours + ":" + minutes + ":" + seconds;

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