Ich möchte einen einfachen Countdown-Timer verwenden, der 30 Sekunden nach dem Ausführen der Funktion beginnt und bei 0 endet. Keine Millisekunden. Wie kann es codiert werden?
147
Ich möchte einen einfachen Countdown-Timer verwenden, der 30 Sekunden nach dem Ausführen der Funktion beginnt und bei 0 endet. Keine Millisekunden. Wie kann es codiert werden?
var count=30;
var counter=setInterval(timer, 1000); //1000 will run it every 1 second
function timer()
{
count=count-1;
if (count <= 0)
{
clearInterval(counter);
//counter ended, do something here
return;
}
//Do code for showing the number of seconds here
}
Um den Code für den Timer in einem Absatz (oder an einer anderen Stelle auf der Seite) anzuzeigen, geben Sie einfach die folgende Zeile ein:
<span id="timer"></span>
wo die Sekunden erscheinen sollen. Fügen Sie dann die folgende Zeile in Ihre timer()
Funktion ein, damit sie so aussieht:
function timer()
{
count=count-1;
if (count <= 0)
{
clearInterval(counter);
return;
}
document.getElementById("timer").innerHTML=count + " secs"; // watch for spelling
}
Ich habe dieses Skript vor einiger Zeit geschrieben:
Verwendung:
quelle
myCounter.stop();
Bisher scheinen die Antworten darauf zu beruhen, dass Code sofort ausgeführt wird. Wenn Sie einen Timer für 1000 ms einstellen, liegt dieser tatsächlich bei 1008.
So sollten Sie es machen:
Rufen Sie zur Verwendung auf:
quelle
Hier ist eine andere, wenn jemand eine für Minuten und Sekunden braucht:
quelle
setTimeout(Decrement, 1000)
wird bevorzugt. stackoverflow.com/questions/6232574/…quelle
Math.floor
, nichtMath.round
Gerade geändert @ ClickUpvote Antwort :
Sie können IIFE (Sofort aufgerufener Funktionsausdruck) und Rekursion verwenden, um es ein bisschen einfacher zu machen:
Code-Snippet anzeigen
quelle
Wenn Sie die akzeptierte Antwort erweitern, wird Ihr Computer möglicherweise in den Ruhezustand versetzt usw. Der Timer funktioniert möglicherweise nicht mehr. Sie können eine echte Zeit auf Kosten einer kleinen Verarbeitung erhalten. Dies gibt eine echte verbleibende Zeit.
quelle
Mit reinem JS können Sie wie folgt vorgehen. Sie müssen der Funktion nur die Anzahl der Sekunden mitteilen, und der Rest wird erledigt.
quelle
Basierend auf der von @Layton Everson vorgestellten Lösung habe ich einen Zähler entwickelt, der Stunden, Minuten und Sekunden enthält:
quelle
quelle
Meine Lösung arbeitet mit MySQL-Datums- und Uhrzeitformaten und bietet eine Rückruffunktion. auf Komplement. Haftungsausschluss: funktioniert nur mit Minuten und Sekunden, da dies das ist, was ich brauchte.
quelle
Aus Gründen der Leistung können wir jetzt requestAnimationFrame sicher für schnelle Schleifen anstelle von setInterval / setTimeout verwenden.
Wenn bei Verwendung von setInterval / setTimeout eine Schleifenaufgabe mehr Zeit als das Intervall benötigt, erweitert der Browser einfach die Intervallschleife, um das vollständige Rendern fortzusetzen. Dies schafft Probleme. Nach Minuten der Überlastung von setInterval / setTimeout kann dies die Registerkarte, den Browser oder den gesamten Computer einfrieren.
Internetgeräte bieten ein breites Leistungsspektrum, so dass es unmöglich ist, eine feste Intervallzeit in Millisekunden fest zu codieren!
Verwenden Sie das Date-Objekt , um die Startdatumsepoche mit der aktuellen zu vergleichen. Das ist viel schneller als alles andere, der Browser um alles kümmern wird, bei einer konstanten 60FPS (1000-1060 = 16.66ms Frame ) - ein Viertel eines Lidschlag - und wenn die Aufgabe in der Schleife , die mehr als das Der Browser lässt einige Repaints fallen.
Dies ermöglicht einen Spielraum, bevor unsere Augen es bemerken ( Mensch = 24FPS => 1000/24 = 41,66 ms pro Frame = flüssige Animation!)
https://caniuse.com/#search=requestAnimationFrame
quelle