- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
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/
哇,这是我的第一篇文章!编程和编码的新手,这是我从事的第一个项目。我希望能够使用 setInterval() 来切换开关以运行代码或停止它。但是现在我无法在选择切换开关时将其关闭。尝试了多种方法,比如
Javascript 具有用于处理异步函数调用的 setInterval 和 clearInterval 函数。 clearInterval(handle) 和 window.clearInterva
我写了一个小函数,像这样每 5 秒移动/弹出一个按钮: HTML: Text JS: var interval; function buttonShake(){ var times = 5;
当我尝试将 clearInterval 绑定(bind)到按钮单击时,我无法正常工作。此外,显然该功能正在自行启动......这是我的代码 var funky = setInterval(functi
我正在创建一个倒数计时器,我需要从不同的函数调用 clearInterval,因为我想用两个不同的按钮开始和暂停倒计时 这是我的一段代码 const startCountdown = () => {
我正在尝试创建一个 slider ,其中的幻灯片或来自ajax。将鼠标悬停在 slider div 上会停止 slider 。为此,我创建了一个函数 sliderPopulateBlocks() ,它
我做了一个演示which is here 。您所要做的就是开始在文本字段中输入内容,确保控制台已打开。因此,当您键入时,您会立即看到 OMG Saved,并且控制台中的计数器会变得疯狂。 现在单击按钮
这是我的代码,它每秒根据变量自动添加一定数量的“点”或金币,但是当该变量发生变化时,这是通过运行此命令来停止设置的间隔的按钮不起作用的。请帮我解决这个问题。 function addMiner() {
我最近尝试每两秒重复一次 jQuery AJAX 请求。请注意:我已经查看了有关 SO 的其他问题,但其中似乎不适用于我的情况,我还查看了文档。 片段: else if (text == "load"
仍在掌握 javascript 的窍门,但不确定如何做到这一点.. 我使用间隔在页面上发送错误和成功消息,但遇到了一些问题。 假设我有以下内容: function setMyInterval(elem
var intervalHandles = []; function instanceLoopTimer(url,instance, time, id) { if (id in intervalHan
所以我尝试使用 JavaScript 编写一个计时器。加载页面时一切都很好,唯一的问题是当我多次重置计时器或使用应用按钮更改其持续时间(请参阅代码以查看这些按钮)而不是按预期运行时,旧实例计时器继续运
已关闭。此问题需要 debugging details 。目前不接受答案。 编辑问题以包含 desired behavior, a specific problem or error, and the
我试图在像这样向下滚动的同时使用 headless-chrome/puppeteer 抓取一些链接: let interval const linkScraper = async () => {
在此程序中,我收到一个日期和时间,并从当前时间和日期开始计算每秒,并在达到用户日期和时间后显示“我们已到达”。 但问题是,一旦达到该时间,即使我清除了间隔,该函数仍然保持执行。 我发现了许多具有相同标
我正在开发游戏。我有带电池的板。单击“开始”后,3秒后,第一个单元格亮起,然后是下一个和下一个......但是,我希望板上只点亮一个单元格。这是我的代码: let intervalId; const
我有这个小脚本,可以通过淡入/淡出效果更改背景图像: /*controla la velocidad de la animación*/ var slideshowSpeed = 1000;
我无法为我的函数运行 clearInterval。我使用它们通过触发 setInterval 和触发 scrollLeft 的函数来滚动窗口。代码: function scrollSpan() {
在给定的代码中,我正在使用 setInterval() 和 clearInterval() 方法。这里有两个用于 setInterval() 的按钮和两个用于 clearInterval() 的按钮,
我正在寻找一种方法来停止我的脚本进程。这是一个有 16 张图片的脚本,每五秒随机选择一张图片。如果您选择了该图片(通过下面的提交按钮),则随机图片“选择器”需要停止。 一切正常,我找不到如何让 set
我是一名优秀的程序员,十分优秀!