Question

我正在尝试创建一个“ Pomodoro”计时器，该计时器需要用户输入，并根据某人想要使用该计时器的时间来创建一个计时器（除了自己为自己学习和使用外，无其他原因）。

我发现我的for循环的运行不符合我的预期，当您查看计时器本身时，它每秒都在递减计数，但是实际上计时器本身每秒钟减少6秒计数。

一旦它到达零，我似乎也无法让计时器继续前进到下一位。

我最初确实在函数中有中断，因此它可以从当前时间移到休息时间，但是似乎并没有解决问题。

关于6秒的问题，我什至不知道从哪里开始。

// set up a counter for how many times you want to set the pomodoro for - users will input how many cycles they want the program to go through.

const pomodoroQuestion = prompt("How many times would you like to use the pomodoro (1 Pomodoro = 3x 25 minute working burst, 2x 5 minute breaks and 1x 15 minute break)");
const pomodoroLength = parseInt(pomodoroQuestion);

for (let i = 0; i < pomodoroLength; i++) {

    function startTimer() {
        const currentTime = document.getElementById('pomodoroClock').innerHTML;
        const timeArray = currentTime.split(/[:]+/);
        let minutes = timeArray[0];
        let seconds = secondsTimer((timeArray[1] - 1));

        if (seconds === 59) {
            minutes = minutes - 1;
        }

        if (minutes < 0) { 
            alert("Time's up");
        }

        document.getElementById('pomodoroClock').innerHTML = `${minutes}:${seconds}`;
        setTimeout(startTimer, 1000); // Make the function countdown each second
    }

    // cycle through the seconds
    function secondsTimer (sec) {
        if (sec < 10 && sec >= 0) {
            sec = `${0}${sec}`;
        }
        if (sec < 0) {
            sec = 59;
        }
        return sec;
    }

    // the following loop will be what starts the actual pomodoro cycle.
    for (let x = 0; x < 3; x++ ) {
        // function starting a countdown timer for 25 minutes
        document.getElementById('pomodoroClock').innerHTML = `${25}:${00}`;
        startTimer();

        if (x < 2) {
            // this is where you're going to perform the function that'll allow for a 5 minute break
            document.getElementById('pomodoroClock').innerHTML = `${05}:${00}`;
            startTimer();

        } else {
            // this is where you're going to perform the function that'll allow for a 15 minute break
            document.getElementById('pomodoroClock').innerHTML = `${15}:${00}`;
            startTimer();
        }
    }

} // end pomodoroLength loop

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Pomodoro Countdown Timer</title>
</head>

<body>
    <div id="pomodoroClock" class="timer"></div>
    <script src="script/script.js"></script>
</body>
</html>

如果有更多经验的人可以帮助我了解我在这方面出了什么问题，我将不胜感激。我觉得我只是对这样的项目缺少一些关键的理解，因此创建的实践项目很少。

我需要帮助以弄清楚此计时器功能为何不起作用

0 个答案: