如何在单击“开始”按钮时启动计时器

Question

我的计时器在打开页面时启动，而不是在单击“开始”按钮时启动。我花了几个小时试图根据我在这个论坛中读到的建议来解决问题：Make countdown start after button is clicked。提前感谢您的帮助。

我的代码：

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实施（这样可以避免在timer()函数中对add进行递归调用）：

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() {。如果这没有帮助，请尝试删除timer()中的add()。

Answer 3

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

timer();

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