Javascript: How to start stopwatch from a given HH:MM:SS?

Question

Update

Managed to start from 01:02:03 now.

startTime = new Date().getTime()-(seconds);

But when I resume the stopwatch, it does not continue from where it was paused. For example, I paused at 00:07:45. I wanted to resume it back but I got 00:15:30.

---

How are you? Hope you guys are having a great day or evening.

So I have a little problem here. I have a stopwatch. I want the stopwatch to run from the specific time displayed.

For example, the time displayed on the stopwatch now is 01:02:03. I want the stopwatch to start from 01:02:03.

I have researched on this. It relates to Epoch Javascript. I converted the 01:02:03 into milliseconds. But it does not start from 01:02:03. Instead, it starts from 22:52:34.

I am not sure where did I do wrong. Please enlighten me.

The Script

/*Global variables here*/

var startTime;
var updatedTime;
var difference;
var tInterval;
var savedTime;
var paused = 0;
var running = 0;

/**This function is triggered when user starts the stopwatch.**/

function startTimer(){
  if(!running){
    // getting the displayed time 
    startTime = document.querySelector('#stopwatch_display').innerText;
    var a = startTime.split(':');
    var seconds = (a[0]*1000*60*60)+(a[1]*1000*60)+(a[2]*1000);
    startTime = new Date(seconds+1);
    tInterval = setInterval(getShowTime, 1);
    // change 1 to 1000 above to run script every second instead of every millisecond. one other change will be needed in the getShowTime() function below for this to work. see comment there.   
 
    paused = 0;
    running = 1;
    // Some styling here
  }
}

/**This function is triggered when user pauses and resumes the stopwatch.**/

function pauseTimer(){
  if (!difference){
    // if timer never started, don't allow pause button to do anything
  } else if (!paused) {
    clearInterval(tInterval);
    savedTime = difference;
    paused = 1;
    running = 0;
    // Some styling here  
 } else {
   // if the timer was already paused, when they click pause again, start the timer again
   startTimer();
  }
}

/**This function is triggered when user resets the stopwatch.**/

function resetTimer(){
  clearInterval(tInterval);
  savedTime = 0;
  difference = 0;
  paused = 0;
  running = 0;
  // Some styling here
}

/**This function is to display the time.**/

function getShowTime(){
  updatedTime = new Date().getTime();
  if (savedTime){
    difference = (updatedTime - startTime) + savedTime;
  } else {
    difference =  updatedTime - startTime;
  }
  var hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((difference % (1000 * 60)) / 1000);
  //var milliseconds = Math.floor((difference % (1000 * 60)) / 100);

  hours = (hours < 10) ? "0" + hours : hours;
  minutes = (minutes < 10) ? "0" + minutes : minutes;
  seconds = (seconds < 10) ? "0" + seconds : seconds;
  //milliseconds = (milliseconds < 100) ? (milliseconds < 10) ? "00" + milliseconds : "0" + milliseconds : milliseconds;
  timerDisplay.innerHTML = hours + ':' + minutes + ':' + seconds;
}

Answer 1

getShowTime should only be calculating the current time. The script should rely on startTimer to continue the timer after pausing. Below is changed code:

function startTimer(){
  if(!running){ // Check if the timer is running
    if (savedTime) { // Are we continuing after pausing?
      startTime = (+ new Date()) - savedTime; // If yes, then start from the savedTime
    } else {
      // If no, get the startTime from the element
      startTime = timerDisplay.innerText;
      var a = startTime.split(':');
      var seconds = (a[0]*1000*60*60)+(a[1]*1000*60)+(a[2]*1000);
      startTime = (+ new Date()) - seconds;
    }
    tInterval = setInterval(getShowTime, 1); // Start the interval
 
    running = true; // Tell the script that the stopwatch is running
  }
}

function getShowTime(){
  updatedTime = + new Date(); // Get current time. Use '+ new Date()' instead because it is much shorter.
  difference =  updatedTime - startTime; // Get the amount of seconds

  // Calculate the different parts
  var hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((difference % (1000 * 60)) / 1000);
  //var milliseconds = Math.floor((difference % (1000 * 60)) / 100);

  hours = (hours < 10) ? "0" + hours : hours;
  minutes = (minutes < 10) ? "0" + minutes : minutes;
  seconds = (seconds < 10) ? "0" + seconds : seconds;
  //milliseconds = (milliseconds < 100) ? (milliseconds < 10) ? "00" + milliseconds : "0" + milliseconds : milliseconds;

  // Update on page
  timerDisplay.innerText = hours + ':' + minutes + ':' + seconds;
}

---

See a working example.

Type the commands into the console.

---

Problems

You have several problems:

Serious problems:

• If the timerDisplay element is empty or not formatted properly, the script should automatically start from 0 instead of breaking. (NaN:NaN:NaN) This hasn't been fixed.
• The script relies on getting the current time, so always calculate from the current time. The problem that you had in your script was that in startTimer, you did new Date(seconds+1) which broke the script, because in getShowTime, it was subtracting a Date() from a timestamp. This has been fixed.
• The handling of continuing the stopwatch after it being paused should be in startTimer, not getShowTime. That has been fixed.

Not so serious problems

• You should now use + new Date() instead of new Date().getTime() because it is much shorter. See this question. Fixed.
• Only have one variable for the state of the stopwatch. Choose between running and paused. You can't have both because it makes the script a bit confusing. I believe you should use running and instead of paused, just use !running. Not fixed.
• Instead of 0 and 1 for running, you should use true and false to make the script more readable. Fixed.

Please try and fix these yourself.