Question

我已经实现了暂停功能，但是我一生都无法将自己的头放在简历功能上。该应用程序的编码方式将seconds变量重置为输入值。我想我盯着这个时间太久了，无法考虑如何建立简历功能。

    let seconds;
    let timer;
    let isRunning = false;
function start(){
        isRunning = !isRunning;
        if(isRunning == true) {
        seconds = document.getElementById("input").value;
        document.getElementById('count-down').innerHTML = seconds;
        timer = setInterval(check, 1000);
        } else {
            pause();
        }
    };
    function pause () {
        clearInterval(timer);
        timer = null;
    }
function check() {
    if(seconds <= 0 ) {
        clearInterval(timer);
        document.getElementById('body').style.backgroundColor = "#80bfff";
    } else {
        seconds--;
        document.getElementById('count-down').innerHTML = seconds;
    }
};
</script>
    <div id = "timer">
        <div id="header">
            <p>Timer</p>
        </div>
        <div id="body">
            <p id="count-down"></p>
            <p class="inline">Enter time(in seconds)</p>
            <input class="inline" type="text" id="input">
            <button type="button" onclick="start()">Start</button>
        </div>
    </div>

Answer 1

尝试一下：

let seconds;
    let timer;
    let isRunning = false;
function start(){
        isRunning = !isRunning;
        if(isRunning == true) {
        seconds = seconds ? seconds : document.getElementById("input").value;
        document.getElementById('count-down').innerHTML = seconds;
        timer = setInterval(check, 1000);
        } else {
            pause();
        }
    };
 function pause () {
        clearInterval(timer);
        timer = null;
    }
function stop(){
    pause();
    seconds = 0;
    isRunning = false;
  document.getElementById('count-down').innerHTML = seconds;
}
function check() {
    if(seconds <= 0 ) {
        clearInterval(timer);
        isRunning = false;
        document.getElementById('body').style.backgroundColor = "#80bfff";
    } else {
        seconds--;
        document.getElementById('count-down').innerHTML = seconds;
    }
};




<div id = "timer">
            <div id="header">
                <p>Timer</p>
            </div>
            <div id="body">
                <p id="count-down"></p>
                <p class="inline">Enter time(in seconds)</p>
                <input class="inline" type="text" id="input">
                <button type="button" onclick="start()">Start</button>
              <button type="button" onclick="stop()">Stop</button>
            </div>
        </div>

Answer 2

当您点击“恢复”时，变量isRunning为true，因此之后seconds变量将立即设置为输入元素的值。

您可以实现一个额外的布尔值，用于检查计时器是否已启动或已完成，因此seconds仅在计时器尚未启动/未完成时才设置为输入值。

Answer 3

感谢您的答复。不幸的是，直到完成项目后，我才看到它们。如果有人需要，我将发布解决方案。

<div id = "timer">
        <div id="header">
            <p>Timer</p>
        </div>
        <div id="body">
            <p id="count-down"></p>
            <p class="inline">Enter time(in seconds)</p>
            <input class="inline" type="text" id="input">
            <br>
            <button type="button" id="button" onclick="start()">Start</button>
            <button type="button" id="reset" onclick="reset()">Reset</button>
        </div>
    </div>
    <script>

    let seconds;
    let timer;
    let timeLeft = 0;
    let isRunning = false;
    let button = document.getElementById("button");
    let counter = document.getElementById("count-down");
    let body = document.getElementById("body");
    function start(){
            isRunning = !isRunning;
            if (isRunning == true && timeLeft > 0) {
                timer = setInterval(function(){check(timeLeft)}, 1000);
                button.innerHTML = "Pause";
            }
            else if(isRunning == true) {
            seconds = document.getElementById("input").value;
            counter.innerHTML = seconds;
            timer = setInterval(function(){check(seconds);}, 1000);
            button.innerHTML = "Pause"; 
            } else {
                pause();
                button.innerHTML = "Resume";
            }
        };
    function pause () {
            clearInterval(timer);
            timer = null;
        };
    function check(someTime) {
            if(someTime <= 0 ) {
                clearInterval(timer);
                body.style.backgroundColor = "#80bfff";
                setTimeout(reset, 5000);
            } else {
            someTime--;
            timeLeft--;
            seconds--;
            timeLeft = someTime;
            counter.innerHTML = someTime;
        }
    };
    function reset() {
        clearInterval(timer);
        timer = null;
        seconds = "";
        timeLeft = 0;
        isRunning = false;
        button.innerHTML = "Start";
        counter.innerHTML = "";
        body.style.backgroundColor = "white";
    }
</script>

倒数计时器暂停/继续功能javascript

3 个答案: