当计时器在 60 秒后启动时显示分钟，然后显示小时

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>

Answer 1

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; };