javascript 启动和停止计时器不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18237502/
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
Start and Stop timer not working
提问by Nick Zink
I am trying to make a timer that starts when you click the top button and stops and resets when you click the bottom button. Here is a link to my fiddle http://www.jsfiddle.net/AbrGL/
我正在尝试制作一个计时器，该计时器在您单击顶部按钮时启动，并在您单击底部按钮时停止并重置。这是我的小提琴的链接http://www.jsfiddle.net/AbrGL/
My HTML:
我的 HTML：
<input type="submit" id="start-clock" value="Click here to start timer" name="submit" onClick="startclock()"/>
<div id="timer">0</div>
<input type="submit" id="stop-clock" value="Click here to stop and reset the timer" name="submit" onClick="stopclock()"/>
My JavaScript:
我的 JavaScript：
function startClock() {
if (clicked === false) {
clock = setInterval("stopWatch()", 1000);
clicked = true;
}
else if (clicked === true) {
}
}
function stopWatch() {
sec+;
document.getElementById("timer").innerHTML = sec;
}
function stopClock() {
window.clearInterval(clock);
sec = 0;
document.getElementById("timer").innerHTML=0;
clicked = false;
}
回答by Travis
Ok you have a lot of typos.
好吧，你有很多错别字。
First, sec+;does not do anything. It should be sec++;.
首先，sec+;什么都不做。应该是sec++;。
Second, your onClickproperties point to startclock()and stopclock(), which should actually be startClock()and stopClock(). Function names are case-sensitive in JavaScript.
其次，您的onClick属性指向startclock()and stopclock()，实际上应该是startClock()and stopClock()。JavaScript 中的函数名称区分大小写。
Third, the clickedvariable is undefined so startClock()will never actually do anything. Add var clicked = false;before your function declarations.
第三，clicked变量是未定义的，所以startClock()实际上永远不会做任何事情。var clicked = false;在函数声明之前添加。
Last but not least, secis undefined, so incrementing it doesn't make sense. Add var sec = 0;before your function declarations.
最后但并非最不重要的，sec是未定义的，所以增加它没有意义。var sec = 0;在函数声明之前添加。
HTML should look like
HTML 应该看起来像
<input type="submit" id="start-clock" value="Click here to start timer" name="submit" onClick="startClock()"/>
<div id="timer">0</div>
<input type="submit" id="stop-clock" value="Click here to stop and reset the timer" name="submit" onClick="stopClock()"/>
and JavaScript should look like
和 JavaScript 应该看起来像
var clicked = false;
var sec = 0;
function startClock() {
if (clicked === false) {
clock = setInterval("stopWatch()", 1000);
clicked = true;
}
else if (clicked === true) {
}
}
function stopWatch() {
sec++;
document.getElementById("timer").innerHTML = sec;
}
function stopClock() {
window.clearInterval(clock);
sec = 0;
document.getElementById("timer").innerHTML=0;
clicked = false;
}
Here is a working fiddle with the changes above: http://jsfiddle.net/AbrGL/8/
这是上述更改的工作小提琴：http: //jsfiddle.net/AbrGL/8/
回答by robin00212
In the "stopWatch()" method, Replace sec+;with sec++;
在“stopWatch()”方法中，替换sec+;为sec++;
I also found some typos, JavaScript is a CaSe SeNsitIvE language
我还发现了一些错别字，JavaScript is a Case SeNsitIvE language
回答by G?khan Girgin
I've made a few changes dom and js
我对 dom 和 js 做了一些改动
HTML
HTML
<input type="button" id="start-clock" value="Click here to start timer"/>
<div id="timer">0</div>
<input type="button" id="stop-clock" value="Click here to stop and reset the timer"/>
JS
JS
var clock;
var sec = 0;
document.getElementById("start-clock").addEventListener("click",function(){
clock = setInterval(stopWatch,1000);
},false);
function stopWatch() {
sec++;
document.getElementById("timer").innerHTML = sec;
}
document.getElementById("stop-clock").addEventListener("click",function(){
window.clearInterval(clock);
sec = 0;
document.getElementById("timer").innerHTML=sec;
},false);
and have a look at jsFiddle
看看jsFiddle
回答by user3184537
Try this one :
试试这个：
http://tutorialzine.com/2015/04/material-design-stopwatch-alarm-and-timer/
http://tutorialzine.com/2015/04/material-design-stopwatch-alarm-and-timer/
this is the best i have ever used, you can make little changes accordingly if required.
这是我用过的最好的，如果需要，您可以相应地做一些小改动。
