清除后如何使"clickMe!"按钮正常工作？我得到的只是"time's up!"

使用"清除"按钮后，我希望在下次单击"单击我"按钮时重新启动计时器。无论我做什么尝试都不会奏效。

var sec = 5;
var timerID;
document.getElementById("b1").onclick = function() {
timerID = setInterval(myTimer, 1000);
};
function myTimer() {
document.getElementById("b1").onclick = function() {
myTimer()
}
document.getElementById('demo').innerHTML = sec + "sec.";
sec--;
if (sec <= -1) {
clearInterval(timerID);
document.getElementById("demo").innerHTML = "Time's Up!";
}
}
$(document).ready(function() {
$("#b2").click(function() {
$("#demo").html("");
})
})

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<button id="b1">Click Me!</button>
<p id="demo"></p>
<button id="b2">Clear!</button>
</body>
</html>

我想要我的"；点击我"；第二次要做的按钮是重新启动计时器。事实并非如此。我尝试了很多事情，但都无济于事。

检查一下！：(

var sec = 5;
var timerID;
document.getElementById("b1").onclick = function() {
timerID = setInterval(myTimer, 1000);
};
function myTimer() {
//   document.getElementById("b1").onclick = function() {
//     myTimer()
//   }
document.getElementById('demo').innerHTML = sec + "sec.";
sec--;
if (sec <= -1) {
clearInterval(timerID);
document.getElementById("demo").innerHTML = "Time's Up!";
}
}
$(document).ready(function() {
$("#b2").click(function() {
clearInterval(timerID);
sec = 5;
$("#demo").html("");
})
})

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<button id="b1">Click Me!</button>
<p id="demo"></p>
<button id="b2">Clear!</button>
</body>
</html>

除了删除元素的innerHTML之外，还需要清除间隔。

var sec = 5;
var timerID;
document.getElementById("b1").onclick = function() {
timerID = setInterval(myTimer, 1000);
};
function myTimer() {
document.getElementById("b1").onclick = function() {
myTimer()
}
document.getElementById('demo').innerHTML = sec + "sec.";
sec--;
if (sec <= -1) {
clearInterval(timerID);
document.getElementById("demo").innerHTML = "Time's Up!";
}
}
$(document).ready(function() {
$("#b2").click(function() {
$("#demo").html("");
clearInterval(timerID);
})
})

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<button id="b1">Click Me!</button>
<p id="demo"></p>
<button id="b2">Clear!</button>
</body>
</html>

myTimer()函数正在删除启动计时器的onclick操作。

只需按下"清除"按钮即可停止计时器，并保持原始onclick。

var sec = 5;
var timerID;
document.getElementById("b1").onclick = function() {
timerID = setInterval(myTimer, 1000);
};
function myTimer() {
document.getElementById('demo').innerHTML = sec + "sec.";
sec--;
if (sec <= -1) {
clearInterval(timerID);
document.getElementById("demo").innerHTML = "Time's Up!";
}
}
$(document).ready(function() {
$("#b2").click(function() {
$("#demo").html("");
clearInterval(timerID);
})
})

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<button id="b1">Click Me!</button>
<p id="demo"></p>
<button id="b2">Clear!</button>
</body>
</html>

相关内容

最新更新

热门标签：