Как дважды нажать пробел, чем сбросить обратный отсчет? - PullRequest
Новая
       25

Как дважды нажать пробел, чем сбросить обратный отсчет?

0 голосов
/ 06 марта 2020 

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

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

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

///////////////////////


///////////////////////
document.addEventListener("keyup", function (event) {

    // 13 = enter button
    if (event.keyCode === 13) {
        reset();
    }

    // 32 = spacebar button
    if (event.keyCode === 32) {
        if (countdownIsRunning) {
            pause();
            countdownIsRunning = false

        } else {
            start();
            countdownIsRunning = true
        }
    }
});

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);

    document.getElementById('millis').innerHTML = "00";
    countdownIsRunning = false;

    //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 cTime = Math.floor(currentTime / 1000);
    timeIncrement = Number.isInteger(cTime) ? cTime : timeIncrement + 1;

    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();
    }
};

/////////////////////////////
/*
const triggers = {

    // keyboard movement
    up: 38,
    down: 40,
    left: 37,
    right: 39,

    // general
    enter: 13,
    backspace: 8,
    space: 32,
};
*/
//preventBrowserFunctionality(trigger)

/*
function preventBrowserFunctionality(triggers) {

    document.onkeydown = function (e) {
        e = e || window.event;

        if (!e) return;

        e.preventDefault();
        e.stopPropagation();

    };
}; */
<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>
<p style="color: white;"> Space = start/pause</p>
<p style="color: white;"> Enter = reset</p>

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

     <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="btneset" onclick="reset()">Reset</button>
  </div>
  <p style="color: white;"> Space = start/pause</p>
  <p style="color: white;"> Enter = reset</p>
  </html>

  <script>
      /**
 * @summary - A countdown clock
 * @author  - Leroy
 */

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

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

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

///////////////////////
let counterDoubleTap = 0;
let isTapped = false;
let doubleTapTimer = false;

document.addEventListener("keyup", function (event) {

    if (event.keyCode === 38) {

        if (!doubleTapTimer) {
            doubleTapTimer = setInterval(() => {
                counterDoubleTap++;
                if (counterDoubleTap > 100) {
                    counterDoubleTap = 0;
                    isTapped = false;
                    alert('nothing');
                }
            }, 10);
        }
    }
});

///////////////////////
document.addEventListener("keyup", function (event) {

    // 13 = enter button
    if (event.keyCode === 13) {
        reset();
    }

    // 32 = spacebar button
    if (event.keyCode === 32) {
        if (countdownIsRunning) {
            pause();
            countdownIsRunning = false

        } else {
            start();
            countdownIsRunning = true
        }
    }
});

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);

    document.getElementById('millis').innerHTML = "00";
    countdownIsRunning = false;

    //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 cTime = Math.floor(currentTime / 1000);
    timeIncrement = Number.isInteger(cTime) ? cTime : timeIncrement + 1;

    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();
    }
};

/////////////////////////////
/*
const triggers = {

    // keyboard movement
    up: 38,
    down: 40,
    left: 37,
    right: 39,

    // general
    enter: 13,
    backspace: 8,
    space: 32,
};
*/
//preventBrowserFunctionality(trigger)

/*
function preventBrowserFunctionality(triggers) {

    document.onkeydown = function (e) {
        e = e || window.event;

        if (!e) return;

        e.preventDefault();
        e.stopPropagation();

    };
}; */
  </script>
...