javascript 重置javascript函数
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/11295142/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Reset javascript function
提问by three3
I am having trouble getting a javascript function to reset itself after an onclick event. When I click the "Start" button the counter begins to count up. But when I click the "Reset" button nothing happens. I need the timer to reset to "0:00" and wait for me to click "Start" again. Here is my code:
我无法在 onclick 事件后让 javascript 函数自行重置。当我单击“开始”按钮时,计数器开始向上计数。但是当我点击“重置”按钮时,什么也没有发生。我需要将计时器重置为“0:00”并等待我再次单击“开始”。这是我的代码:
<script type="text/javascript">
var seconds = 0;
var minutes = 0;
function zeroPad(time) {
var numZeropad = time + '';
while(numZeropad.length < 2) {
numZeropad = "0" + numZeropad;
}
return numZeropad;
}
function countSecs() {
seconds++;
if (seconds > 59) {
minutes++;
seconds = 0;
}
document.getElementById("timeBox").innerHTML = "Time " + zeroPad(minutes) + ":" + zeroPad(seconds);
}
function startTimer() {
action = window.setInterval(countSecs,1000);
}
function resetTimer() {
var seconds = 0;
var minutes = 0;
}
</script>
<body>
<button onclick = "startTimer()">Start</button>
<div id="timeBox">Time 00:00</div>
<button onclick = "resetTimer">Reset</button>
</body>
采纳答案by iambriansreed
Onclick events must call functions like: onclick="resetTimer();"
with the parenthesis at the end. Some browsers may try to submit on button clicks if you don't define type="button"
. I didn't assume you wanted reset timer to stop the timer so I added a stop button.
Onclick 事件必须调用函数,如:onclick="resetTimer();"
末尾带有括号。如果您没有定义type="button"
. 我没有假设你想要重置计时器来停止计时器,所以我添加了一个停止按钮。
http://jsfiddle.net/iambriansreed/WRdSK/
http://jsfiddle.net/iambriansreed/WRdSK/
<button type="button" onclick="startTimer();">Start</button>
<div id="timeBox">Time 00:00</div>
<button type="button" onclick="resetTimer();">Reset</button>
<button type="button" onclick="stopTimer();">Stop</button>
<script>
window.seconds = 0;
window.minutes = 0;
function startTimer() {
window.action = setInterval(countSecs,1000);
}
function resetTimer() {
seconds = 0;
minutes = 0;
}
function stopTimer() {
clearInterval(action);
seconds = -1;
minutes = 0;
countSecs();
}
function zeroPad(time) {
var numZeropad = time + '';
while(numZeropad.length < 2) {
numZeropad = "0" + numZeropad;
}
return numZeropad;
}
function countSecs() {
seconds++;
if (seconds > 59) {
minutes++;
seconds = 0;
}
document.getElementById("timeBox").innerHTML = "Time " + zeroPad(minutes) + ":" + zeroPad(seconds);
}
</script>
?
?
回答by adatapost
Call the clearInterval()method.
调用clearInterval()方法。
function resetTimer() {
window.clearInterval(action);
}
回答by Jeremy Peterson
This is a scoping issue, using var inside a function, makes secondsand minuteslocal to that function. Removing the leading var will start you off in the right direction.
这是一个作用域问题,在函数内部使用 var 会使秒和分钟成为该函数的本地。删除领先的 var 将使您朝着正确的方向前进。
function resetTimer() {
seconds = 0;
minutes = 0;
}
回答by Sirko
You have two errors in your code:
您的代码中有两个错误:
First, in the button you missed the ()
after the function's name in order to make an actual call:
首先,在按钮()
中,为了进行实际调用,您错过了函数名称之后:
<button onclick = "resetTimer()">Reset</button>
Second, you did not stop the interval using window.clearInterval()
(MDN docu), so the timer went on and on.
其次,您没有使用window.clearInterval()
(MDN docu)停止间隔,因此计时器一直在继续。
// just to make it an explicit global variable. already was an implicit one.
var action;
// rest of your code
function resetTimer() {
// clear the timer
window.clearInterval( action );
// reset variables
var seconds = 0;
var minutes = 0;
// update output
document.getElementById("timeBox").innerHTML = "Time " + zeroPad(minutes) + ":" + zeroPad(seconds);
}
I set up a working fiddle here.
我在这里设置了一个工作小提琴。