Как использовать обработчики событий с функцией обновления для запуска и остановки секундомера

Мне нужно прикрепить обработчики событий к функции обновления, чтобы кнопка остановки останавливала время, а кнопка запуска запускала его снова.

Я пробовал несколько способов сделать это, показанных обработчиками функций. Но я не могу заставить это работать.

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>

Можно ли что-нибудь сделать, чтобы заставить их работать? Где мне нужно обновить мою функцию обновления? Любые советы помогают.


javascript button html event-handling stopwatch
person John Doee    schedule 21.02.2019    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Если вы хотите вычесть время, вот что вы можете сделать.

  1. При запуске запишите текущее время.
  2. При обновлении посмотрите, сколько времени прошло с тех пор, как мы в последний раз записывали его, прибавьте его к общему пройденному времени, снова запишите текущее время.
  3. При остановке прекратите обновление таймера.

Спойлер:

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>

person WofWca    schedule 21.02.2019

arrow_upward
1
arrow_downward

Что ж, я бы сделал просто setInterval при нажатии кнопки «Пуск», если она еще не установлена; и clearInterval на "Стоп". Спойлер:

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>

person WofWca    schedule 21.02.2019
comment
Когда я нажимаю стоп, он останавливается нормально. Но затем, когда я снова нажимаю «Пуск», он начинается с другого времени. Как будто время все еще идет, только анимация останавливается при нажатии кнопки «Стоп». - person John Doee; 21.02.2019
comment
Не могли бы вы объяснить, почему это так? - person John Doee; 21.02.2019
comment
d = new Date(); При каждом обновлении вы получаете текущее системное время. Чтобы предотвратить это, вы можете создать свою собственную переменную и добавлять к ней 10 (миллисекунд) при каждом вызове update(). Затем, чтобы преобразовать миллисекунды во время, вы можете использовать setMilliseconds для объекта Date (который вы можете инициализировать с помощью new Date(0). - person WofWca; 21.02.2019
comment
Есть ли способ определить переменную с новой датой () перед функцией обновления. Затем внутри функции обновления вычтите предыдущую новую дату () и текущую новую дату ()? Надеюсь, это имеет смысл. - person John Doee; 21.02.2019
comment
Ну да. Вы можете запоминать текущее время каждый раз при запуске таймера и вычитать его из текущего времени при каждом обновлении. - person WofWca; 21.02.2019
comment
Не могли бы вы подсказать мне, как это сделать? Я не смог сделать это успешно после многих попыток. - person John Doee; 21.02.2019
comment
Добавлено как новый ответ. - person WofWca; 21.02.2019