Muszę przymocować ręce zdarzeń do funkcji aktualizacji, dzięki czemu przycisk STOP zatrzyma czas, a przycisk Start uruchomi go ponownie.

Próbowałem wiele sposobów na to, pokazane przez obsługiwanie funkcji. Ale nie mogę się tego nie dostać.

stop = document.getElementById('Stop');
        var watchRunning = new Boolean(false);

        Start.addEventListener('click', startHandler);

        function startHandler() {
            d.watchRunning = true;
        }

        Stop.addEventListener('click', stopHandler);

        function stopHandler() {
            stop.onclick = function() {
                clearTimeout(watchRunning);
            }
        }

        update();
        var testVar = window.setInterval(update, 10);
        var seconds;
        var milliseconds;
        var d;

        function update() {
            d = new Date();
            seconds = d.getSeconds();
            milliseconds = Math.floor((d.getMilliseconds() / 10));

            if (milliseconds < 10 && seconds < 10) {
                document.getElementById("Time").innerHTML =
                    "0" + seconds + ":0" + milliseconds;

            } else if (milliseconds < 10 && seconds >= 10) {
                document.getElementById("Time").innerHTML =
                    seconds + ":0" + milliseconds;

            } else if (milliseconds >= 0 && seconds < 10) {
                document.getElementById("Time").innerHTML =
                    "0" + seconds + ":" + milliseconds;

            } else if (milliseconds >= 0 && seconds >= 10) {
                document.getElementById("Time").innerHTML =
                    seconds + ":" + milliseconds;
            }
        }
#Time {
            background-color: yellow;
            max-width: 5%;
        }
<h1>Stop Watch</h1>
    <button id="Start">Start</button>
    <button id="Stop">Stop</button>
    <h3>Elapsed Time:</h3>
    <p id="Time"></p>

Czy coś może zrobić, aby te pracy? Gdzie musiałbym zaktualizować funkcję aktualizacji? Wszelkie pomocy wskazówek.

0
John Doee 21 luty 2019, 05:50

2 odpowiedzi

Najlepsza odpowiedź

Jeśli chcesz odejść czas, oto co możesz zrobić.

  1. Na początku zapisz aktualny czas.
  2. Na aktualizacji, zobacz, ile czasu minęło, odkąd ostatnio napisaliśmy go, dodaj go do całkowitego czasu minimalnego, zapisz ponownie aktualny czas.
  3. Na przystanku zatrzymaj aktualizację timera.

Spojler:

const stop = document.getElementById('Stop');
const start = document.getElementById('Start');
let watchIntervalTimer;
let countingSince;

function startHandler() {
    if (!watchIntervalTimer) {  // If it's not set.
        watchIntervalTimer = setInterval(updateTimer, 10);
        countingSince = Date.now();
    }
}

function stopHandler() {
    clearInterval(watchIntervalTimer);
    watchIntervalTimer = null;  // So we can identify that it's reset.
}

Start.addEventListener('click', startHandler);
Stop.addEventListener('click', stopHandler);

var seconds;
var milliseconds;
var d;
let timePassed = 0;
updateLabel();

function updateTimer() {
    timePassed += Date.now() - countingSince;
    countingSince = Date.now();
    updateLabel();
}

function updateLabel() {
    d = new Date(timePassed);
    seconds = d.getSeconds();
    milliseconds = Math.floor((d.getMilliseconds() / 10));

    if (milliseconds < 10 && seconds < 10) {
        document.getElementById("Time").innerHTML =
            "0" + seconds + ":0" + milliseconds;

    } else if (milliseconds < 10 && seconds >= 10) {
        document.getElementById("Time").innerHTML =
            seconds + ":0" + milliseconds;

    } else if (milliseconds >= 0 && seconds < 10) {
        document.getElementById("Time").innerHTML =
            "0" + seconds + ":" + milliseconds;

    } else if (milliseconds >= 0 && seconds >= 10) {
        document.getElementById("Time").innerHTML =
            seconds + ":" + milliseconds;
    }
}
#Time {
    background-color: yellow;
    max-width: 5%;
}
<h1>Stop Watch</h1>
<button id="Start">Start</button>
<button id="Stop">Stop</button>
<h3>Elapsed Time:</h3>
<p id="Time"></p>
1
WofWca 21 luty 2019, 06:44

Cóż, to, co zrobiłbym tylko setInterval po naciśnięciu "start", jeśli nie jest już ustawiony; i clearInterval na "stop". Spojler:

const stop = document.getElementById('Stop');
const start = document.getElementById('Start');
let watchIntervalTimer;

function startHandler() {
    if (!watchIntervalTimer) {  // If it's not set.
        watchIntervalTimer = setInterval(update, 10);
    }
}

function stopHandler() {
    clearInterval(watchIntervalTimer);
    watchIntervalTimer = null;  // So we can identify that it's reset.
}

Start.addEventListener('click', startHandler);
Stop.addEventListener('click', stopHandler);

update();
var seconds;
var milliseconds;
var d;

function update() {
    d = new Date();
    seconds = d.getSeconds();
    milliseconds = Math.floor((d.getMilliseconds() / 10));

    if (milliseconds < 10 && seconds < 10) {
        document.getElementById("Time").innerHTML =
            "0" + seconds + ":0" + milliseconds;

    } else if (milliseconds < 10 && seconds >= 10) {
        document.getElementById("Time").innerHTML =
            seconds + ":0" + milliseconds;

    } else if (milliseconds >= 0 && seconds < 10) {
        document.getElementById("Time").innerHTML =
            "0" + seconds + ":" + milliseconds;

    } else if (milliseconds >= 0 && seconds >= 10) {
        document.getElementById("Time").innerHTML =
            seconds + ":" + milliseconds;
    }
}
#Time {
    background-color: yellow;
    max-width: 5%;
}
<h1>Stop Watch</h1>
<button id="Start">Start</button>
<button id="Stop">Stop</button>
<h3>Elapsed Time:</h3>
<p id="Time"></p>
1
WofWca 21 luty 2019, 03:14