タイマーが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; 
 
};