我有这个例子:
<p id="test"></p>
<button onClick="clearInterval(myVar)">Stop time!</button>
<button onClick="setInterval(myTimer, 1000)">Start time!</button>
<script>
var myVar = setInterval(myTimer, 1000);
function myTimer() {
var d = new Date();
document.getElementById('test').innerHTML = d.toLocaleTimeString();
}
</script>
当我点击“停止时间!”时这是第一次按预期工作,但点击“开始时间!”后我不能再停止计时器了。为什么会发生这种情况以及如何解决这个问题?
感谢。
答案 0 :(得分:5)
看看这段代码
<button onClick="setInterval(myTimer, 1000)">Start time!</button>
它不起作用,因为您没有将新计时器设置为变量。它不知道应该在那里设置新值。
不是内联代码的粉丝,但这可行
<button onClick="myVar = setInterval(myTimer, 1000)">Start time!</button>
更好的设计是这样的:
(function() {
var timer;
function myTimer() {
var d = new Date();
document.getElementById('test').innerHTML = d.toLocaleTimeString();
}
function startTimer() {
stopTimer(); //make sure timer is not already running
timer = setInterval(myTimer, 1000); //start new timer
}
function stopTimer() {
if (timer) clearInterval(timer);
timer = null;
}
document.getElementById("stop").addEventListener("click", stopTimer);
document.getElementById("start").addEventListener("click", startTimer);
startTimer();
}());
<p id="test"></p>
<button id="stop">Stop time!</button>
<button id="start">Start time!</button>
答案 1 :(得分:0)
试试这个..
<p id="test"></p>
<button onClick="clearInterval(myVar)">Stop time!</button>
<button onClick="startTimer()">Start time!</button>
<script>
var myVar;
function startTimer() {
myVar = setInterval(myTimer, 1000);
}
function myTimer() {
var d = new Date();
document.getElementById('test').innerHTML = d.toLocaleTimeString();
}
</script>