启动和停止计时器不工作

Question

我正在尝试制作一个计时器，当您单击顶部按钮时启动，当您点击底部按钮时停止并重置。这是我小提琴的链接http://www.jsfiddle.net/AbrGL/

我的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()"/>

我的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;
}

Answer 1

好吧，你有很多打字错误。

首先，sec+;什么都不做。它应该是sec++;。

其次，您的onClick属性指向startclock()和stopclock()，它们实际上应该是startClock()和stopClock()。函数名在JavaScript中区分大小写。

第三，clicked变量是未定义的，所以startClock()实际上永远不会做任何事情。在函数声明之前添加var clicked = false;。

最后但同样重要的是，sec是未定义的，因此递增它没有意义。在函数声明之前添加var sec = 0;。

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()"/>

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;
}

以下是对上述变化的处理：http://jsfiddle.net/AbrGL/8/

Answer 2

在"stopWatch（）"方法中，用sec++; 替换sec+;

我还发现了一些拼写错误，JavaScript是一种CaSe-SeNsitIvE语言

Answer 3

我对dom和js 做了一些更改

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-

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);

并查看jsFiddle

Answer 4

试试这个：

http://tutorialzine.com/2015/04/material-design-stopwatch-alarm-and-timer/

这是我用过的最好的，如果需要，你可以做一些相应的改变。