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

Question

Я сделал обратный отсчет, но теперь я хочу сделать поле ввода с тем, сколько минут отсчет должен отсчитывать. У меня есть довольно простой обратный отсчет c, но у меня нет того, что пользователь помещает количество минут в поле ввода, нажимает кнопку, и оно отсчитывает минуты. И я надеюсь, что кто-то может помочь мне с этим.

Вот что я получил до сих пор:

    (()=> {
     let countdownEnded = false;
    start(3600); // seconds
    })();

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

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


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

    function updateDisplay(seconds, currentTime){    
        let timeIncrement = Math.floor(currentTime / 1000);
        updateTime(seconds - 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 {
            clearInterval(intervalSeconds);
            countdownEnded = true;
            countDivElement.innerHTML = 'countdown done';
            return null;
        }

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

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

        let intervalMillis = setInterval(()=> {

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

        countMillsElement.innerHTML = millis;
        counterMillis --;

        }, 10);

        if(countdownEnded) {
        stop();              /*** Updated***/  
        return clearInterval(intervalMillis);
        }
    };

  <div class="clock" id="model3">
    <div id="countdown">    <!-- Updated -->  
      <span id="timer"></span><span id="millis"></span>
    </div>
  </div>
  <input id="minutes" placeholder="0:00"/>  

Answer 1

Я думаю, что это может вам помочь. Измените следующее

<input id="minutes" placeholder="00"/>  <button onclick="startTimer()">Start</button>

И в javascript добавьте новую функцию

function startTimer(){
var x=document.getElementById("minutes").value * 60; //To Change into Seconds
start(x);
}

И удалите функцию запуска

Answer 2

Просто добавьте кнопку с событием щелчка, которое принимает входное значение и запускает вашу функцию запуска с этим значением в качестве параметра. Примерно так:

document.getElementById("startBtn").addEventListener("click", startTimer);
function startTimer() {
  var numberOfMinutes = Number(document.getElementById("minutes").value) * 60;
  start(numberOfMinutes);
}

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

https://jsfiddle.net/scarabs/6patc9mo/1/