Я пытаюсь создать таймер «Pomodoro», который принимает пользовательский ввод и создает таймер, основываясь на том, как долго кто-то хочет его использовать (не иначе как для изучения и использования его для себя).
Я обнаружил, что мои циклы for не работают так, как я ожидал, и когда вы смотрите на сам таймер, он начинает отсчитывать каждую секунду, однако сам таймер фактически уменьшается на 6 секунд каждую секундуcount.
Я также не могу заставить таймер перейти к следующему биту, как только он достигнет нуля.
У меня изначально были перерывы в функции, чтобы он перешел изтекущее время для отдыха, но это, похоже, не сработало.
С точки зрения проблемы 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>
Буду признателен, если у кого-то будет немного больше опытаможет помочь мне понять, где я ошибаюсь с этим.Я чувствую, что мне просто не хватает нескольких ключевых деталей для понимания подобных проектов, поэтому я создаю небольшие практические проекты для улучшения.