提问人：Bob Marin 提问时间：8/18/2023 最后编辑：VLAZBob Marin 更新时间：8/24/2023 访问量：94
倒数计时器上的暂停-恢复功能 （Javascript）
Pause-resume function on countdown timer (Javascript)
问：
目前正在创建一个 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>答：
0赞
woodendoors7
8/18/2023
#1
这是一个非常简单但有效的解决方案。
创建一个新的顶级变量，如 。let started = false
然后，对按钮进行编码，使“开始”按钮将其设置为 true，而“暂停”按钮将其设置为 false。然后，检查是否在超时的开头，如果是，则在该时间间隔内停止运行函数。startedfalsereturn
let started = false;
// ...etc
setInterval(()=>{
if(!started) return;
// ...etc
}, 5)
评论
0赞
Bob Marin
8/22/2023
谢谢你的回答，@woodendoors7。我理解你的话背后的逻辑，但我在这方面很新手，我无法在我的代码:(上实现它
0赞
woodendoors7
8/24/2023
您想澄清哪一部分？@BobMarin
上一个：Kafka 消费者睡眠唤醒
评论