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

在＆＃34; stopWatch（）＆＃34;方法，将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/

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

启动和停止计时器不工作

4 个答案: