gpt4 book ai didi

javascript - 在 clearInterval() 之后恢复定时器

转载 作者:行者123 更新时间:2023-11-30 17:14:45 26 4
gpt4 key购买 nike

clearInterval 函数仅在我的代码中停止计时器,而不是实际时间。单击停止 按钮后,计时器停止了,但它似乎仍在后台运行。当我再次重新单击 start 按钮时,它不会从停止的地方恢复,而是显示在后台运行的实际时间。请查看代码中的操作。

我如何才能真正停止计时器并在我再次单击 start 按钮后单击 stop 按钮恢复它?

var timeBegan = new Date();

function start(){
started = window.setInterval(clockRunning, 10);

}

function stop(){
window.clearInterval(started);
}





function clockRunning(){
currentTime = new Date()
, timeElapsed = new Date(currentTime - timeBegan)
, hour = timeElapsed.getUTCHours()
, min = timeElapsed.getUTCMinutes()
, sec = timeElapsed.getUTCSeconds()
, ms = timeElapsed.getUTCMilliseconds();

document.getElementById("display-area").innerHTML =
(hour > 9 ? hour : "0" + hour) + ":" +
(min > 9 ? min : "0" + min) + ":" +
(sec > 9 ? sec : "0" + sec) + "." +
(ms > 99 ? ms : ms > 9 ? "0" + ms : "00" + ms);
};

function reset(){
window.clearInterval(started);
running = 0;
hour = min = sec = ms = 0;
document.getElementById("display-area").innerHTML = "00:00:00.000";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Stopwatch</title>
<script src="stopwatch.js"></script>
<style>
#display-area { font-size: 20pt; }
</style>

</head>
<body>
<div>
<output id="display-area">00:00:00.000</output>
</div>
<div>
<button id="start-button" onClick="start()">Start</button>
<button id="stop-button" onclick="stop()">Stop</button>
<button id="reset-button" onclick="reset()">Reset</button>

</div>
</body>
</html>

最佳答案

这是因为您从未重置timeBegan。您将继续对开始时间使用相同的值。

您需要将此值设置为 start() 中的当前时间,否则您只是使用页面加载的时间作为引用时间,而不是 start() 的时间 最后被调用。

var timeBegan;

function start() {
timeBegan = new Date();
started = window.setInterval(clockRunning, 10);
}

或者,您可以在 reset() 中执行此操作,然后单击停止再单击开始将更像一个圈计时器;您可以卡住时间,但在后台它会一直计数,直到您点击重置按钮。

如果您希望停止按钮暂停计时器,那么在您单击停止的那一刻,您需要在某处记录当前持续时间。然后在您的 clockRunning() 函数中,您可以将此持续时间添加到您的时间减法计算结果中。 (当然,reset() 应该清除这个存储的持续时间。)

关于javascript - 在 clearInterval() 之后恢复定时器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26331734/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com