启动和停止计时器不工作

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/