目前正在创建一个 25 分钟倒计时器，带有计时递增/递减按钮。我设法创建计时器并在按下“开始”按钮时让它工作，但我正在努力寻找一种方法来插入一个函数，以在按下“暂停”按钮时暂停它并在按下“开始”按钮时恢复。我已经检查了有关此问题的多个线程，但我无法使建议的解决方案符合我的逻辑。任何提示将不胜感激。请在下面找到我的代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>25 + 5 Clock</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<link rel="stylesheet" href="./styles/styles.css">
<style>
* {
text-align: center;
}
</style>
</head>
<body>
<h1>25 + 5 Clock</h1>
<div class="row" id="columnas">
<div class="col" id="break-label">Hey you!
<div class="5">
<button id="break-decrement" class="btn btn-primary" type="button" name="button" onclick="breakDec()">break-dec</button>
<div id="break-length">5</div>
<button id="break-increment" class="btn btn-primary" type="button" name="button" onclick="breakInc()">break-inc</button>
</div>
</div>
<div class="col" id="session-label">Session length
<div class="25">
<button id="session-decrement" class="btn btn-success" type="button" name="button" onclick="sessionDec()">session-dec</button>
<div id="session-length">25</div>
<button id="session-increment" class="btn btn-success" type="button" name="button" onclick="sessionInc()">session-inc</button>
</div>
</div>
</div>
<div class="tiempo">
<div id="timer-label">Session</div>
<div id="time-left">
<span class="minutes_value" id="minute_value">25</span>:
<span class="seconds_value" id="second_value">00</span>
</div>
</div>
<div class="botones">
<button id="start_stop" type="button" name="button" onclick="alertMe()">Start</button>
<button id="reset" type="button" name="button">Reset</button>
</div>
<button type="button" name="button" id="clickButton">Pause</button>
<! -- Break decrement -->
<script>
function breakDec() {
if (document.getElementById("break-length").innerHTML <= "1") {
document.getElementById("break-length").innerHTML === parseFloat(1)
}
else {document.getElementById("break-length").innerHTML = parseFloat(document.getElementById("break-length").innerHTML) - parseFloat( 1)}
}
</script>
<! -- Break increment -->
<script>
function breakInc() {
document.getElementById("break-length").innerHTML = parseFloat(document.getElementById("break-length").innerHTML) + parseFloat( 1)
}
</script>
<! -- session decrement -->
<script>
function sessionDec() {
if (document.getElementById("session-length").innerHTML <= 1) {
document.getElementById("session-length").innerHTML === parseFloat(1)
} else
{document.getElementById("session-length").innerHTML = parseFloat(document.getElementById("session-length").innerHTML) - parseFloat( 1);
document.getElementById("minute_value").innerHTML = parseFloat(document.getElementById("minute_value").innerHTML) - parseFloat( 1);}
}
</script>
<! -- Session increment -->
<script>
function sessionInc() {
document.getElementById("session-length").innerHTML = parseFloat(document.getElementById("session-length").innerHTML) + parseFloat( 1);
document.getElementById("minute_value").innerHTML = parseFloat(document.getElementById("minute_value").innerHTML) + parseFloat( 1);
}
</script>
<! -- ***************************************************************************************** -->
<! -- C O U N T D O W N -->
<! -- ***************************************************************************************** -->
<! -- ***************************************************************************************** -->
<! -- ***************************************************************************************** -->
<script>
function alertMe() {
const deadlineTime = new Date(new Date().getTime() + parseFloat(document.getElementById("minute_value").innerHTML) * 60000);
setInterval(function() {
//current time
const currentTime = new Date();
//show the start time, equivalent to 5 minutes(300000)
const time_start = deadlineTime - currentTime;
//converting the time in minutes
const min_info = Math.floor((time_start % (1000 * 60 * 60)) / (1000 * 60));
//converting time in seconds
const sec_info = Math.floor((time_start % (1000 * 60)) / 1000);
//mostrar temporizador
document.getElementById("minute_value").innerHTML = min_info;
document.getElementById("second_value").innerHTML = sec_info;
if (time_start < 0) {
clearInterval(alertMe);
document.getElementById("minute_value").innerHTML = "0";
document.getElementById("second_value").innerHTML = "0";
}
}, 5);
}
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Rx+T1VzGupg4BHQYs2gCW9It+akI2MM/mndMCy36UVfodzcJcF0GGLxZIzObiEfa" crossorigin="anonymous"></script>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js" charset="utf-8"></script>
</body>
</html>这是一个非常简单但有效的解决方案。
创建一个新的顶级变量，如
let started = false然后，对按钮进行编码，以便开始按钮将其设置为 true，暂停按钮将其设置为 false。然后，在超时开始时检查
startedfalsereturnlet started = false;
// ...etc
setInterval(()=>{
if(!started) return;
// ...etc
}, 5)