Question

我一直在使用setTimeout和一个警报，但是当我在警报上按“OK”时它注意到计时器仍然继续，但它不能用于我的重置。这意味着当我点击重置时，计时器将不知道时间已经重置并且将继续计入警报。

<body>

    <div class="class">
        <h2>CSC 131 Attendance Tracker</h2>
    </div>
    <div class="stopwatch">
        <div class="title">
            <h2>KEY:</h2>
            <!-- <input type="text" name="output" id="Key"> -->
            <p><font size="7" id="Key" ></font></p>
            <!-- <button onclick="createKey()">Generate</button> -->
        </div>
        <div class="time">
            <h2>TIME:</h2>
        </div>
        <div class="display">
            <span class="minutes">00:</span><span class="seconds">00:</span><span class="centiseconds">00</span>
        </div>
        <div class="controls">
            <!-- <button onclick = "myFunction(); startTimer();">Start</button> -->
            <button onclick = "createKey(); setTimeout(timesUP(), 299999);" class="start">Start</button>
            <button class="stop">Stop</button>
            <button onclick = "createKey();" class="reset">Reset</button>
        </div>
    </div>


    <script>
        function takeKey(){
            var Input = prompt("");
            if (Input!= null) {
                document.getElementById("takeID").innerHTML = Input;
            }
        }

        function createKey() {
            var x = Math.random().toString(36).substr(2, 6)
            document.getElementById("Key").innerHTML = x;
        }

        function timesUP() {
            alert('TIMESUP');
        }

        var ss = document.getElementsByClassName('stopwatch');

        [].forEach.call(ss, function (s) {
        var currentTimer = 0,
            interval = 0,
            lastUpdateTime = new Date().getTime(),
            start = s.querySelector('button.start'),
            stop = s.querySelector('button.stop'),
            reset = s.querySelector('button.reset'),
            mins = s.querySelector('span.minutes'),
            secs = s.querySelector('span.seconds'),
            cents = s.querySelector('span.centiseconds');

            start.addEventListener('click', startTimer);
            stop.addEventListener('click', stopTimer);
            reset.addEventListener('click', resetTimer);

        function pad (n) {
            return ('00' + n).substr(-2);
        }

        function update () {
            var now = new Date().getTime(),
                dt = now - lastUpdateTime;

            currentTimer += dt;

            var time = new Date(currentTimer);

            mins.innerHTML = pad(time.getMinutes()) + ":";
            secs.innerHTML = pad(time.getSeconds()) + ":";
            cents.innerHTML = pad(Math.floor(time.getMilliseconds() / 10));

            lastUpdateTime = now;
        }

        function startTimer () {
            if (!interval) {
                lastUpdateTime = new Date().getTime();
                interval = setInterval(update, 1);
            }
        }

        function stopTimer () {
            clearInterval(interval);
            interval = 0;
        }

        function resetTimer () {
            stopTimer();

            currentTimer = 0;

            mins.innerHTML = secs.innerHTML = cents.innerHTML = pad(0);
        }
    });
    </script>
</body>

我想知道如何在秒表上设定时间限制

0 个答案: