1

我正在尝试制作一个计时器，该计时器在您单击顶部按钮时启动，并在您单击底部按钮时停止并重置。这是我的小提琴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;
}
4

4 回答 4

10

好吧，你有很多错别字。

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

其次，您的onClick属性指向startclock()and stopclock()，实际上应该是startClock()and 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/

于 2013-08-14T16:56:58.737 回答
3

在“stopWatch()”方法中，替换sec+;为sec++;

我还发现了一些错别字，JavaScript 是一种 CaSe SeNsitIvE 语言

于 2013-08-14T16:55:58.897 回答
2

我做了一些改变 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

于 2013-08-14T16:58:26.603 回答
-1

试试这个：

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

这是我用过的最好的，如果需要，您可以相应地进行一些更改。

于 2016-08-24T10:38:29.367 回答