如何让我的重置按钮在倒数计时中起作用？

问题描述 投票：0回答：2

// 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() {
    
}

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);
    }
};
 <div class="clock" id="model3">
    <div id="countdown">
      <span id="timer"></span><span id="millis"></span>
    </div>
  </div>
  <input type="number" id="minutesInputField" placeholder="minutes" />
  <div class="buttons">
    <button class="btn start" onclick="start()">Start</button>
    <button class="btn pause" onclick="pause()">Pause</button>
    <button class="btn reset" onclick="reset()">Reset</button>

  </div>

我使用开始，暂停和重置功能进行倒计时。启动功能起作用并暂停。当我按下暂停然后开始时，它会继续，所以非常完美。但是，如果我想按重置键，则需要将其重置为输入字段中的分钟数。如果那里没有任何东西，因为它默认为30分钟，那么在您按下Reset按钮时，它需要30分钟。那是我的问题。是否有人可以帮助我？谢谢！ 

<html>
<div class="clock" id="model3">
    <div id="countdown">
      <span id="timer"></span><span id="millis">

      </span>
    </div>
  </div>
  <input type="number" id="minutesInputField" placeholder="minutes" />
  <div class="buttons">
    <button class="btn start" onclick="start()">Start</button>
    <button class="btn pause" onclick="pause()">Pause</button>
    <button class="btn reset" 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() {
        clearInterval(intervalSeconds);
        document.getElementById('minutesInputField').innerHTML;
    }

    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);
        }
    };
javascript html button reset countdown
2个回答
0
投票

您的重置功能不完整，它必须包含以下内容：

document.getElementById('minutesInputField').innerHTML = '30:00:00';
0
投票

尝试一下：

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

或此（具有默认值）：

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


// 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);
        }
    };
<html>
<div class="clock" id="model3">
    <div id="countdown">
      <span id="timer"></span><span id="millis">

      </span>
    </div>
  </div>
  <input type="number" id="minutesInputField" placeholder="minutes" />
  <div class="buttons">
    <button class="btn start" onclick="start()">Start</button>
    <button class="btn pause" onclick="pause()">Pause</button>
    <button class="btn reset" onclick="reset()">Reset</button>

  </div>
  </html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.