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

试试这个：

＆＃13;

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

＆＃13;

分钟和小时将显示为小数，除非您将它们舍入（或放置）。但是，我认为你希望它显示更像是＆＃34; 1：15＆＃34;或＆＃34; 2：20：15＆＃34;相反，所以这将照顾到：

＆＃13;

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

＆＃13;

当计时器在60秒后开始显示分钟然后是几小时

1 个答案: