Meine Countdownclock-Funktion läuft weiter

Ich kann nicht herausfinden, warum meine Countdownclock-Funktion nach dem Erreichen von 00:00 wieder startet. Es geht um 00:00 Uhr, startet dann aber wieder von dem aus, was ich eingegeben habe. Ich glaube, ich muss eine Bedingung wie eine Weile #time! = "00:00" hinzufügen, aber ich bin mir nicht ganz sicher, wie.Meine Countdownclock-Funktion läuft weiter

function startTimer(duration, display) { 
 
    var start = Date.now(), 
 
    diff, 
 
    minutes, 
 
    seconds; 
 

 
    function timer() { 
 
    // get the number of seconds that have elapsed since 
 
    // startTimer() was called 
 
    diff = duration - (((Date.now() - start)/1000) | 0); 
 

 
    // does the same job as parseInt truncates the float 
 
    minutes = (diff/60) | 0; 
 
    seconds = (diff % 60) | 0; 
 

 
    minutes = minutes < 10 ? "0" + minutes : minutes; 
 
    seconds = seconds < 10 ? "0" + seconds : seconds; 
 

 
    display.textContent = minutes + ":" + seconds; 
 

 
    if (diff <= 0) { 
 
     // add one second so that the count down starts at the full duration 
 
     // example 05:00 not 04:59 
 
     start = Date.now() + 1000; 
 
    } 
 
    }; 
 

 
    // we don't want to wait a full second before the timer starts 
 
    timer(); 
 
    setInterval(timer, 1000); 
 
} 
 

 
window.onload = function() { 
 
    var choice = prompt("Minutes to launch") 
 
    var setTheClock = 60 * choice, 
 
    display = document.querySelector('#time'); 
 
    startTimer(setTheClock, display); 
 
};

<body style="width: 100vw; padding: 0; border: 0; margin: 0;"> 
 
    <div style="width: 60vh; padding: 0; border: 0; margin: 0 auto;"> 
 
    <p id="time" style="font-family:futura; font-size: 20vh; text-align: center; padding: 0; border: 0; margin-top: 40vh"></p> 
 
    </div> 
 
</body>

Quelle

2017-04-26 jlanssie

Sie müssen das Intervall löschen. Setzen Sie das Intervall auf eine Variable und löschen Sie es, wenn es fertig ist, sonst wird es weitergehen.

function startTimer(duration, display) { 
 
    var start = Date.now(), 
 
    diff, 
 
    minutes, 
 
    seconds; 
 

 
    function timer() { 
 
    var interval; 
 
    // get the number of seconds that have elapsed since 
 
    // startTimer() was called 
 
    diff = duration - (((Date.now() - start)/1000) | 0); 
 

 
    // does the same job as parseInt truncates the float 
 
    minutes = (diff/60) | 0; 
 
    seconds = (diff % 60) | 0; 
 

 
    minutes = minutes < 10 ? "0" + minutes : minutes; 
 
    seconds = seconds < 10 ? "0" + seconds : seconds; 
 

 
    display.textContent = minutes + ":" + seconds; 
 

 
    if (diff <= 0) { 
 
     // add one second so that the count down starts at the full duration 
 
     // example 05:00 not 04:59 
 
     start = Date.now() + 1000; 
 
     clearInterval(interval); 
 
    } 
 
    }; 
 

 
    // we don't want to wait a full second before the timer starts 
 
    timer(); 
 
    interval = setInterval(timer, 1000); 
 
} 
 

 
window.onload = function() { 
 
    var choice = prompt("Minutes to launch") 
 
    var setTheClock = 60 * choice, 
 
    display = document.querySelector('#time'); 
 
    startTimer(setTheClock, display); 
 
};

<body style="width: 100vw; padding: 0; border: 0; margin: 0;"> 
 
    <div style="width: 60vh; padding: 0; border: 0; margin: 0 auto;"> 
 
    <p id="time" style="font-family:futura; font-size: 20vh; text-align: center; padding: 0; border: 0; margin-top: 40vh"></p> 
 
    </div> 
 
</body>

Quelle

2017-04-26 21:46:50

Need {Intervall} –

TBH @codenoir zu erklären, ich habe nicht viel Erfahrung mit Intervalle. Es scheint zu funktionieren, aber ich würde denken, dass ich es erklären müsste. Aber wie? –

Nur die Variablendeklaration für Intervall. Irgendwo oben, "var interval;". Das ist alles. –

Sie müssen die interval in einer Variablen speichern und löschen, wenn die Gesamtzeit 0

Arbeitslösung erhält.

function startTimer(duration, display) { 
 
    var start = Date.now(), 
 
    diff, 
 
    minutes, 
 
    seconds, 
 
    countDownTimer; 
 

 
    function timer() { 
 
    // get the number of seconds that have elapsed since 
 
    // startTimer() was called 
 
    diff = duration - (((Date.now() - start)/1000) | 0); 
 

 
    // does the same job as parseInt truncates the float 
 
    minutes = (diff/60) | 0; 
 
    seconds = (diff % 60) | 0; 
 

 
    minutes = minutes < 10 ? "0" + minutes : minutes; 
 
    seconds = seconds < 10 ? "0" + seconds : seconds; 
 

 
    display.textContent = minutes + ":" + seconds; 
 

 
    if (diff <= 0) { 
 
     // add one second so that the count down starts at the full duration 
 
     // example 05:00 not 04:59 
 
     start = Date.now() + 1000; 
 
\t clearInterval(countDownTimer); \t 
 
    } 
 
    } 
 

 
    // we don't want to wait a full second before the timer starts 
 
    timer(); 
 
    countDownTimer = setInterval(timer, 1000); 
 
} 
 

 
window.onload = function() { 
 
    var choice = prompt("Minutes to launch") 
 
    var setTheClock = 60 * choice, 
 
    display = document.querySelector('#time'); 
 
    startTimer(setTheClock, display); 
 
};

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body style="width: 100vw; padding: 0; border: 0; margin: 0;"> 
 
    <div style="width: 60vh; padding: 0; border: 0; margin: 0 auto;"> 
 
    <p id="time" style="font-family:futura; font-size: 20vh; text-align: center; padding: 0; border: 0; margin-top: 40vh"></p> 
 
    </div> 
 
</body> 
 
</html>

Quelle

2017-04-27 07:34:36 azs06

Meine Countdownclock-Funktion läuft weiter

Antwort

Verwandte Themen