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

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

0 голосов
/ 21 февраля 2019

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

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

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>

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

Ответы [ 2 ]

0 голосов
/ 21 февраля 2019

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

  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>
0 голосов
/ 21 февраля 2019

Хорошо, я бы просто сделал 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>
...