Я хочу, чтобы кнопка ввода работала с функциями запуска и паузы - PullRequest
0 голосов
/ 02 марта 2020

У меня есть обратный отсчет по умолчанию 30 минут и поле ввода с другими минутами, которые вы можете ввести, если хотите, кроме 30 минут. У меня 3 кнопки запуска, паузы и сброса всех кнопок работы. Но если я хочу начать обратный отсчет, он должен сработать, и если я хочу сделать паузу, я хочу нажать Enter еще раз, а затем он будет приостановлен.

// global setinterval timer
let countdownEnded = false;
let countdownIsRunning = false;
let counter = -1; // reset  must be counter = -1
let counterMillis = 99;

// counters
let intervalSeconds = false;
let intervalMillis = false;

// init
(() => {
    updateDisplay(1800, 0);
    document.getElementById('millis').innerHTML = "00";
})();
let input = document.getElementById("minutesInputField");
input.addEventListener("keyup", function(event) {
    if (event.keyCode === 13) {
     document.getElementById("btnStart").click();
    }
  });



function start(time = 1800) {
    
    let startTime = Date.now();
    let inputTime;

    let countdownDoneElement =
        document.getElementById("cd-done");
    countdownDoneElement.style.display = 'none';

    let countdownRunningElement =
        document.getElementById('cd-running');
    countdownRunningElement.style.display = 'inline-flex';

    if (!countdownIsRunning) {
        countdownIsRunning = true;
        inputTime =
            counter === -1
                ? document.getElementById('minutesInputField').value * 60 || time
                : counter
    } else {
        inputTime = document.getElementById('minutesInputField').value * 60 || time
    }

    clearInterval(intervalSeconds);
    intervalSeconds = setInterval(() => {
        let currentTime = Date.now() - startTime;

        if (inputTime < 1) {
            stop();
        } else {
            counter = inputTime - updateDisplay(inputTime, currentTime);
            updateMillis();
        }
    }, 1000);
}

function pause() {
    clearInterval(intervalSeconds);
    clearInterval(intervalMillis);
    countdownIsRunning = false;
}

function reset() {
    // clear existing intervals
    clearInterval(intervalSeconds);
    clearInterval(intervalMillis);
    

    let currentTimeInput = document.getElementById('minutesInputField').value * 60;
    counter = currentTimeInput || 1800;
    counterMillis = 0;
    updateDisplay(counter, 0);

    //defaultMinute = 30;
    //updateDisplay((document.getElementById('minutesInputField').value || defaultMinute) * 60, 0);
}


function stop() {
    let countdownRunningElement = document.getElementById("cd-running");
    let countdownDoneElement = document.getElementById("cd-done");

    countdownRunningElement.style.display = 'none';
    countdownDoneElement.style.display = 'inline-flex';
    countdownDoneElement.innerHTML = 'countdown done';

    countdownEnded = true;
    clearInterval(intervalSeconds);
    clearInterval(intervalMillis);
}

function updateDisplay(seconds, currentTime) {
    let timeIncrement = Math.floor(currentTime / 1000);
    updateTime(seconds - timeIncrement);
    return timeIncrement;
}

/**
 * @method - updatesecondsond
 * @summary - This updates the timer every seconds
 */

function updateTime(seconds) {
    let countDivElement = document.getElementById("timer");

    let minutes = Math.floor(seconds / 60);
    let remainingSeconds = seconds % 60;

    if (remainingSeconds < 10) {
        remainingSeconds = '0' + remainingSeconds;
    }

    if (minutes < 10) {
        minutes = '0' + minutes;
    }

    if (seconds > 0) {
        seconds = seconds - 1;
    } else {
        stop();
    }

    countDivElement.innerHTML = minutes + ":" + remainingSeconds + ":";
};

function updateMillis() {
    let countMillsElement = document.getElementById('millis');
    let millis = 0;

    //  milliseconds from document.getElementById.value
    // check for value and let counter continue from that point on
    
    clearInterval(intervalMillis);
    intervalMillis = setInterval(() => {

        if (counterMillis < 0) {
            counterMillis = 99;
        } else {
            millis = counterMillis < 10 ? counterMillis + '0' : counterMillis;
        };

        countMillsElement.innerHTML = millis;
        counterMillis--;

    }, 10);

    if (countdownEnded) {
        stop();
    }
};
  <div class="clock" id="model3">
    <div id="countdown">
      <div id="cd-running">
        <span id="timer"></span>
        <span id="millis"></span>
      </div>
      <div id="cd-done" style="display: none;">

      </div>
    </div>
  </div>
  <input type="number" id="minutesInputField" placeholder="minutes" value="30" />
  <div class="buttons">
    <button id="btnStart" onclick="start()">Start</button>
    <button id="btnPause" onclick="pause()">Pause</button>
    <button id="btneset" onclick="reset()">Reset</button>

  </div>
<html>     
   <div class="clock" id="model3">
  <div id="countdown">
    <div id="cd-running">
      <span id="timer"></span>
      <span id="millis"></span>
    </div>
    <div id="cd-done" style="display: none;">

    </div>
  </div>
</div>
<input type="number" id="minutesInputField" placeholder="minutes" value="30" />
<div class="buttons">
  <button id="btnStart" onclick="start()">Start</button>
  <button id="btnPause" onclick="pause()">Pause</button>
  <button id="btnReset" onclick="reset()">Reset</button>

</div>
 </html>



    // global setinterval timer
    let countdownEnded = false;
    let intervalSeconds = false;
    let counter = -1; // reset  must be counter = -1

    // init
    (() => {
        updateDisplay(1800, 0);
        document.getElementById('millis').innerHTML = "00";

        //element.addEventListener("click", function(){ myFunction(p1, p2); }); 
    })();


    function start(time = 1800) {
        let startTime = Date.now();

        let inputTime =
            counter === -1
                ? document.getElementById('minutesInputField').value * 60 || time
                : counter

        intervalSeconds = setInterval(() => {
            let currentTime = Date.now() - startTime;

            if (inputTime < 1) {
                stop();
            } else {
                counter = inputTime - updateDisplay(inputTime, currentTime);
                updateMillis();
            }
        }, 1000);
    }

    function pause() {
        clearInterval(intervalSeconds);
        interval = undefined;
    }

    function reset() {
        defaultMinute = 30;
        clearInterval(intervalSeconds);
        updateDisplay((document.getElementById('minutesInputField').value || defaultMinute)*60,0);
        }


    function stop() {
        let countDivElement = document.getElementById("countdown");
        countDivElement.innerHTML = 'countdown done';
        countdownEnded = true;
        clearInterval(intervalSeconds);
    }

    function updateDisplay(seconds, currentTime) {
        let timeIncrement = Math.floor(currentTime / 1000);
        updateTime(seconds - timeIncrement);
        return timeIncrement;
    }

    /**
     * @method - updatesecondsond
     * @summary - This updates the timer every seconds
     */

    function updateTime(seconds) {
        let countDivElement = document.getElementById("timer");

        let minutes = Math.floor(seconds / 60);
        let remainingSeconds = seconds % 60;

        if (remainingSeconds < 10) {
            remainingSeconds = '0' + remainingSeconds;
        }

        if (minutes < 10) {
            minutes = '0' + minutes;
        }

        if (seconds > 0) {
            seconds = seconds - 1;
        } else {
            stop();
        }

        countDivElement.innerHTML = minutes + ":" + remainingSeconds + ":";
    };

    function updateMillis() {
        let countMillsElement = document.getElementById('millis');
        let counterMillis = 99;
        let millis = 0;

        let intervalMillis = setInterval(() => {

            if (counterMillis < 0) {
                clearInterval(intervalMillis);
                counterMillis = 99;
            } else {
                millis = counterMillis < 10 ? counterMillis + '0' : counterMillis;
            };

            countMillsElement.innerHTML = millis;
            counterMillis--;

        }, 10);

        if (countdownEnded) {
            stop();
            clearInterval(intervalMillis);
        }
    };
...