When timer starts after 60 seconds show minutes and then hours

Question

When the start task button is clicked I want an invisible timer to start, and then when the finished Task button is clicked I want the time it took to finish the task to be displayed. After 60 seconds I want the time to be displayed in in minutes and then after 60 minutes I want the time to hours.

Right now when you fun my code it will show the time but it only shows the time in seconds.

let startTime;

const timer = typeof performance !== `undefined` && typeof performance.now === `function` ? performance : Date;
const startButton = document.getElementById('start');
const stopButton = document.getElementById('stop');
const display = document.getElementById('display');

startButton.onclick = () => {
    console.debug('START')
    startTime = timer.now();
};

stopButton.onclick = () => {
    console.debug('STOP')
    display.innerHTML = Math.round((timer.now() - startTime) / 1000);
};

<h1>
      <!-- This shows the heading of the entire checklist -->
        Master on Call Checklist
    </h1>

    <ul class="checklist ng-pristine ng-untouched ng-valid ng-isolate-scope ui-sortable" ui-sortable="sortableOptions" ng-model="task">

        <li> <!-- This puts a bullet point in front of the title-->
          <h2>            
            <!-- This shows the heading of task done after hours -->
            <a href="#"> <!-- This makes the title blue -->
              Done after regular work hours</a>
          </h2>
        </li>

        <li>  
          <h2>
            <!-- This shows the heading of task done during regular hours -->
            <a href="#">
              Done during regular work hours
            </a>
          </h2>
        </li>

        <li>
          <h2>
            <!-- This shows the heading of task that need to be constantly looked at -->
            <a href="#">
              Tasks that need to be constantly checked throughout the week
            </a>
          </h2>
        </li>

        <button type="button" id="start">Start Task</button>
          <p style="float:left;"></p>
            <!-- Heading to review cameras and adjest as needed -->
          <a>
            Review cameras and adjest as needed
          </a>
        <button type="button" id="stop">Finished Task</button>
        <div id="display"></div>

http://stackoverflow.com/questions/37096367/how-to-convert-seconds-to-minutes-and-hours-in-javascript — jmoerdyk, Aug 08 '16 at 18:06

score 0 · Answer 1 · answered Aug 08 '16 at 18:07

Try this:

stopButton.onclick = () => {
    console.debug('STOP');
    var time = Math.round((timer.now() - startTime) / 1000);
    if (time >= 60) { >= 1 minute
        time = time / 60; // Minutes
        if (time >= 60) { // >= 1 hour
            time = time / 60; // Hours
        }
    }
    display.innerHTML = time;
};

The minutes and hours will be displayed as decimals unless you round (or floor) those as well. I assume, however, that you want it displayed more like "1:15" or "2:20:15" instead, so this will take care of that:

stopButton.onclick = () => {
    console.debug('STOP');
    var totalSeconds = Math.round((timer.now() - startTime) / 1000);
    var totalMinutes = Math.floor(totalSeconds / 60);
    var totalHours = Math.floor(totalSeconds / 60 / 60);
    var displaySeconds = totalSeconds - totalMinutes * 60; // Gets the number of seconds to display
    var displayMinutes = totalMinutes - totalHours * 60; // Gets the number of minutes to display
    var strDisplayTime =
        (totalHours > 0 ? (totalHours + ':') : '') +
        (displayMinutes > 0 || totalHours > 0 ?
          ((displayMinutes >= 10 ? '' : '0') + displayMinutes + ':') : '') +
        ((displaySeconds >= 10 ? '' : '0') + displaySeconds)
    display.innerHTML = strDisplayTime;
};

Sorry I meant for the code I just added to go in here as a comment Jeremy — Mikie Benedetto, Aug 08 '16 at 20:46

When timer starts after 60 seconds show minutes and then hours

1 Answers1