當計時器在60秒後啓動時顯示分鐘，然後顯示時間

Question

當單擊啓動任務按鈕時，我想啓動一個不可見的計時器，然後單擊完成的任務按鈕時，我想要完成任務所需的時間顯示。 60秒後，我希望在幾分鐘內顯示時間，然後在60分鐘後我想要時間到幾小時。

現在，當你使用我的代碼時，它會顯示時間，但它只顯示秒數。

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

試試這個：

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

分鐘和小時將除非你圓（或地面）顯示爲小數的爲好。我想，但是，你想讓它顯示的更像是「1:15」或「2點20分15秒」，而不是，所以這將採取照顧：

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