Javascript Stopwatch - Subtracting Time

Question

// Convert time to a format of hours, minutes, seconds, and milliseconds

function timeToString(time) {
    let diffInHrs = time / 3600000;
    let hh = Math.floor(diffInHrs);
  
    let diffInMin = (diffInHrs - hh) * 60;
    let mm = Math.floor(diffInMin);
  
    let diffInSec = (diffInMin - mm) * 60;
    let ss = Math.floor(diffInSec);
  
    let diffInMs = (diffInSec - ss) * 100;
    let ms = Math.floor(diffInMs);
  
    let formattedHH = hh.toString().padStart(2, "0");
    let formattedMM = mm.toString().padStart(2, "0");
    let formattedSS = ss.toString().padStart(2, "0");
    let formattedMS = ms.toString().padStart(2, "0");
  
    return `${formattedHH}:${formattedMM}:${formattedSS}:${formattedMS}`;
  }
  
  // Declare variables to use in our functions below
  
  let startTime;
  let elapsedTime = 0;
  let timerInterval;
  
  // Create function to modify innerHTML
  
  function print(txt) {
    document.getElementById("display").innerHTML = txt;
  }
  
  // Create "start", "pause" and "reset" functions
  
  function start() {
    startTime = Date.now() - elapsedTime;
    timerInterval = setInterval(function printTime() {
      elapsedTime = Date.now() - startTime;
      print(timeToString(elapsedTime));
    }, 10);
    showButton("PAUSE");
  }
  
  function pause() {
    clearInterval(timerInterval);
    showButton("PLAY");
  }
  
  function reset() {
    clearInterval(timerInterval);
    print("00:00:00:00");
    elapsedTime = 0;
    showButton("PLAY");
  }

  function subtime() {
    clearInterval(timerInterval); 
    elapsedTime = elapsedTime - 120000;
    start();
    }
  
  
  // Create function to display buttons
  
  function showButton(buttonKey) {
    const buttonToShow = buttonKey === "PLAY" ? playButton : pauseButton;
    const buttonToHide = buttonKey === "PLAY" ? pauseButton : playButton;
    buttonToShow.style.display = "block";
    buttonToHide.style.display = "none";
  }
  // Create event listeners
  
  let playButton = document.getElementById("playButton");
  let pauseButton = document.getElementById("pauseButton");
  let resetButton = document.getElementById("resetButton");
  let subButton = document.getElementById("subButton");
  
  
  playButton.addEventListener("click", start);
  pauseButton.addEventListener("click", pause);
  resetButton.addEventListener("click", reset);
  subButton.addEventListener("click", subtime);

body {
    background-color: #2c3347;
    color: #ffffff;
  }
  
  h1 {
    font-size: 48px;
    font-family: "Montserrat", sans-serif;
    font-weight: 200;
  
    text-align: center;
    line-height: 59px;
  
    padding: 0 64px;
    margin: 0;
  }
  
  .stopwatch {
    display: grid;
    justify-items: center;
    grid-row-gap: 23px;
    width: 100%;
    padding-top: 25px;
  }
  
  .circle {
    display: flex;
    justify-content: center;
    align-items: center;
  
    height: 350px;
    width: 350px;
  
    border: 2px solid;
    border-radius: 50%;
  }
  
  .time {
    font-family: "Roboto Mono", monospace;
    font-weight: 300;
    font-size: 48px;
  }
  
  .gold {
    font-weight: 900;
  
    color: #21e8d8;
    text-shadow: 0 0 0px #fff, 0 0 50px #21e8d8;
  }
  
  .controls {
    display: flex;
    justify-content: space-between;
  
    width: 187px;
  }
  
  button {
    cursor: pointer;
    background: transparent;
    padding: 0;
    border: none;
    margin: 0;
    outline: none;
  }
  
  #playButton {
    display: block;
  }
  
  #pauseButton {
    display: none;
  }



  
    
    
    Study Watch
    
    
    
  

  
    
      STUDY WATCH
      
        00:00:00:00

So I found and modified this stopwatch code and basically want the functionality to reduce the running time by a preset amount (2 min). I have this much working currently. However if there is less than 2 minutes the clock rolls automatically to -1hr 58 min 00 seconds and counts up from there.

How do I make it so that it would become -0 hr 02 min 00 seconds and count up to 0 and then continue counting. Is this possible with the current code?

Aidan Donnelly · Accepted Answer

Adjusting your display function, I was able to update this as requested and removing use of Date.now() from your calculation for elapsed time as I personally do not see the benefit of using this for your calculation each time.

See the updated code to reflect these changes

function display(elapsed) {
// Time is in ms needs converted to HH:MM:SS:MS ignoring each section if negative
const negative = elapsed < 0;
const positiveNumber = Math.abs(elapsed);
const calcHours = Math.floor(positiveNumber / (60 * 60 * 1000));
const calcMinutes = Math.abs(Math.floor((positiveNumber - (calcHours * 60 * 60 * 1000)) / (60 * 1000)));
const calcSeconds = Math.floor((positiveNumber - (calcHours * 60 * 60 * 1000) - (calcMinutes * 60 * 1000)) / 1000);
const calcMilliseconds = Math.floor((positiveNumber - (calcHours * 60 * 60 * 1000) - (calcMinutes * 60 * 1000) - (calcSeconds * 1000)));


let checkHours = calcHours < 0 ? 0 : calcHours;
let checkMinutes = calcMinutes < 0 ? 0 : calcMinutes;
let checkSeconds = calcSeconds < 0 ? 0 : calcSeconds;
let checkMilliseconds = calcMilliseconds < 0 ? 0 : calcMilliseconds;

let formattedHours = checkHours.toString().padStart(2, "0");
let formattedMinutes = checkMinutes.toString().padStart(2, "0");
let formattedSeconds = checkSeconds.toString().padStart(2, "0");
let formattedMilliseconds = checkMilliseconds.toString().padStart(2, "0");

return negative ? `-${formattedHours}:${formattedMinutes}:${formattedSeconds}:${formattedMilliseconds}` : `${formattedHours}:${formattedMinutes}:${formattedSeconds}:${formattedMilliseconds}`;
}

// Declare variables to use in our functions below

let startTime;
let elapsedTime = 0;
let intervalDelay = 10
let timerInterval;

// Create function to modify innerHTML

function print(txt) {
    document.getElementById("display").innerHTML = txt;
}

// Create "start", "pause" and "reset" functions

function start() {
    timerInterval = setInterval(function printTime() {
        elapsedTime += intervalDelay
        print(display(elapsedTime))
    }, intervalDelay);
    showButton("PAUSE");
}

function pause() {
    clearInterval(timerInterval);
    showButton("PLAY");
}

function reset() {
    clearInterval(timerInterval);
    print("00:00:00:00");
    elapsedTime = 0;
    showButton("PLAY");
}

function subtime() {
    clearInterval(timerInterval);
    elapsedTime = elapsedTime-120000;
    start();
}


// Create function to display buttons

function showButton(buttonKey) {
    const buttonToShow = buttonKey === "PLAY" ? playButton : pauseButton;
    const buttonToHide = buttonKey === "PLAY" ? pauseButton : playButton;
    buttonToShow.style.display = "block";
    buttonToHide.style.display = "none";
}
// Create event listeners

let playButton = document.getElementById("playButton");
let pauseButton = document.getElementById("pauseButton");
let resetButton = document.getElementById("resetButton");
let subButton = document.getElementById("subButton");


playButton.addEventListener("click", start);
pauseButton.addEventListener("click", pause);
resetButton.addEventListener("click", reset);
subButton.addEventListener("click", subtime);

body {
    background-color: #2c3347;
    color: #ffffff;
  }
  
  h1 {
    font-size: 48px;
    font-family: "Montserrat", sans-serif;
    font-weight: 200;
  
    text-align: center;
    line-height: 59px;
  
    padding: 0 64px;
    margin: 0;
  }
  
  .stopwatch {
    display: grid;
    justify-items: center;
    grid-row-gap: 23px;
    width: 100%;
    padding-top: 25px;
  }
  
  .circle {
    display: flex;
    justify-content: center;
    align-items: center;
  
    height: 350px;
    width: 350px;
  
    border: 2px solid;
    border-radius: 50%;
  }
  
  .time {
    font-family: "Roboto Mono", monospace;
    font-weight: 300;
    font-size: 48px;
  }
  
  .gold {
    font-weight: 900;
  
    color: #21e8d8;
    text-shadow: 0 0 0px #fff, 0 0 50px #21e8d8;
  }
  
  .controls {
    display: flex;
    justify-content: space-between;
  
    width: 187px;
  }
  
  button {
    cursor: pointer;
    background: transparent;
    padding: 0;
    border: none;
    margin: 0;
    outline: none;
  }
  
  #playButton {
    display: block;
  }
  
  #pauseButton {
    display: none;
  }



  
    
    
    Study Watch
    
    
    
  

  
    
      STUDY WATCH
      
        00:00:00:00

Javascript Stopwatch - Subtracting Time

Answers (1)

Related Questions