如何使计时器仅在单击开始按钮时开始

Question

我的计时器在页面打开时与单击“开始”按钮时启动。 我花了几个小时试图根据我在本论坛中阅读的建议解决问题： 单击按钮后开始倒计时。 预先感谢您的帮助。

我的代码：

var h1 = document.getElementsByTagName('h1')[0],
    start = document.getElementById('start'),
    stop = document.getElementById('stop'),
    clear = document.getElementById('clear'),
    seconds = 0, minutes = 0, hours = 0,
    t;

function add() {
    seconds++;
    if (seconds >= 60) {
        seconds = 0;
        minutes++;
        if (minutes >= 60) {
            minutes = 0;
            hours++;
        }


    h1.textContent = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds);

    timer();
}
function timer() {
    t = setTimeout(add, 1000);
}
timer();


/* Start button */
start.onclick = timer;

/* Stop button */
stop.onclick = function() {
    clearTimeout(t);
}

/* Clear button */
clear.onclick = function() {
    h1.textContent = "00:00:00";
    seconds = 0; minutes = 0; hours = 0;
}

Answer 1

您需要删除对timer()的调用：

function timer() {
    t = setTimeout(add, 1000);
}
//timer();//this causes the timer to start one the page is loaded

您的代码中还有一个缺少大括号} ：

if (seconds >= 60) {
    seconds = 0;
    minutes++;
    //missing } here

查看工作片段

 var h1 = document.getElementsByTagName('h1')[0], start = document.getElementById('start'), stop = document.getElementById('stop'), clear = document.getElementById('clear'), seconds = 0, minutes = 0, hours = 0, t; function add() { seconds++; if (seconds >= 60) { seconds = 0; minutes++; } if (minutes >= 60) { minutes = 0; hours++; } h1.textContent = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds); timer(); } function timer() { t = setTimeout(add, 1000); } //timer(); /* Start button */ start.onclick = function(){ start.disabled = true; timer(); }; /* Stop button */ stop.onclick = function() { clearTimeout(t); start.disabled = false; } /* Clear button */ clear.onclick = function() { h1.textContent = "00:00:00"; seconds = 0; minutes = 0; hours = 0; }

 <h1></h1> <button id="start">Start</button> <button id="stop">Stop</button> <button id="clear">Clear</button>

使用setInterval实现（这样可以避免在add函数中递归调用timer() ）：

 var h1 = document.getElementsByTagName('h1')[0], start = document.getElementById('start'), stop = document.getElementById('stop'), clear = document.getElementById('clear'), seconds = 0, minutes = 0, hours = 0, t; function add() { seconds++; if (seconds >= 60) { seconds = 0; minutes++; } if (minutes >= 60) { minutes = 0; hours++; } h1.textContent = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds); } function timer() { t = setInterval(add, 1000); } //timer(); /* Start button */ start.onclick = function(){ start.disabled = true; timer(); }; /* Stop button */ stop.onclick = function() { clearInterval(t) start.disabled = false; } /* Clear button */ clear.onclick = function() { h1.textContent = "00:00:00"; seconds = 0; minutes = 0; hours = 0; }

 <h1></h1> <button id="start">Start</button> <button id="stop">Stop</button> <button id="clear">Clear</button>

Answer 2

删除timer()下方function timer() { 。 如果这没有帮助，也尝试在add()删除timer() 。

Answer 3

在按下开始按钮之前，您在代码中调用timer() 。

timer();

从您的代码中删除该行并进行测试； 一旦你这样做，计时器就不应该在页面加载时开始。