javascript - When timer starts after 60 seconds show minutes and then hours -

when start task button clicked want invisible timer start, , when finished task button clicked want time took finish task displayed. after 60 seconds want time displayed in in minutes , after 60 minutes want time hours.

right when fun code show time shows 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>       <!-- shows heading of 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> <!-- puts bullet point in front of title-->           <h2>                         <!-- shows heading of task done after hours -->             <a href="#"> <!-- makes title blue -->               done after regular work hours</a>           </h2>         </li>          <li>             <h2>             <!-- shows heading of task done during regular hours -->             <a href="#">               done during regular work hours             </a>           </h2>         </li>          <li>           <h2>             <!-- shows heading of task need looked @ -->             <a href="#">               tasks need checked throughout week             </a>           </h2>         </li>          <button type="button" id="start">start task</button>           <p style="float:left;"></p>             <!-- heading review cameras , adjest needed -->           <a>             review cameras , adjest needed           </a>         <button type="button" id="stop">finished task</button>         <div id="display"></div> 

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 , hours displayed decimals unless round (or floor) well. assume, however, want displayed more "1:15" or "2:20:15" instead, 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 number of seconds display      var displayminutes = totalminutes - totalhours * 60; // gets number of minutes display      var strdisplaytime =          (totalhours > 0 ? (totalhours + ':') : '') +          (displayminutes > 0 || totalhours > 0 ?            ((displayminutes >= 10 ? '' : '0') + displayminutes + ':') : '') +          ((displayseconds >= 10 ? '' : '0') + displayseconds)      display.innerhtml = strdisplaytime;  };