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

Question

My timer starts when page is opened versus when clicking the Start button. I have spent hours trying to resolve the problem based on the suggestions I read in this forum: Make countdown start after button is clicked . Thank you in advance for your assistance.

My Code:

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

You need to remove the call to timer() :

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

Also there is a missing brace } in your code here:

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

See working snippet

 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>

Implementation using setInterval (this way you can avoid the recursive call to timer() in your add function):

 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

Remove timer() underneath function timer() { . If that doesn't help, try removing timer() in add() as well.

Answer 3

You call timer() in your code, before the start button is pressed.

timer();

Remove that line from your code and test it; the timer shouldn't begin on page load once you do that.