Ich wollte nur fragen, wie man den einfachsten Countdown-Timer erstellt.
Auf der Website wird ein Satz angezeigt, der besagt:
"Die Registrierung endet in 05:00 Minuten!"
Ich möchte also einen einfachen js-Countdown-Timer erstellen, der von "05:00" bis "00:00" reicht und nach dem Ende auf "05:00" zurückgesetzt wird.
Ich habe bereits einige Antworten durchgesehen, aber alle scheinen zu intensiv (Datumsobjekte usw.) für das zu sein, was ich tun möchte.
javascript
timer
countdown
countdowntimer
Bartek
quelle
quelle
setInterval
und .innerHTML-basiert machen, anstatt datumsbasiert.Antworten:
Ich habe zwei Demos, eine mit
jQuery
und eine ohne. Weder verwenden Datumsfunktionen und sind so einfach wie es nur geht.Demo mit Vanille JavaScript
Demo mit jQuery
Wenn Sie jedoch einen genaueren Timer wünschen, der nur geringfügig komplizierter ist:
Nachdem wir einige ziemlich einfache Timer erstellt haben, können wir über die Wiederverwendbarkeit und die Trennung von Bedenken nachdenken. Wir können dies tun, indem wir fragen: "Was soll ein Countdown-Timer tun?"
In Anbetracht dieser Dinge können wir also ein besseres (aber immer noch sehr einfaches) schreiben.
CountDownTimer
Warum ist diese Implementierung besser als die anderen? Hier sind einige Beispiele, was Sie damit machen können. Beachten Sie, dass die
startTimer
Funktionen bis auf das erste Beispiel nicht alle erreichen können.Ein Beispiel, das die Uhrzeit im XX: XX-Format anzeigt und nach Erreichen von 00:00 neu startet
Ein Beispiel, das die Uhrzeit in zwei verschiedenen Formaten anzeigt
Ein Beispiel mit zwei verschiedenen Timern und nur einem Neustart
Ein Beispiel, das den Countdown-Timer startet, wenn eine Taste gedrückt wird
quelle
minutes = minutes < 10 ? "0" + minutes : minutes;
var
Deklaration verschiedene Deklarationen trennt. sominutes
undseconds
sind einfach deklarierte (aber nicht initialisierte) Variablen. Alsotimer
ist einfach gleich derduration
Parameter, nicht mehr und nicht weniger.Wenn Sie einen echten Timer möchten, müssen Sie das Datumsobjekt verwenden.
Berechnen Sie die Differenz.
Formatieren Sie Ihre Zeichenfolge.
Beispiel
Jsfiddle
nicht so präziser Timer
JsFiddle
quelle
Mit setInterval können Sie ganz einfach eine Timer-Funktionalität erstellen. Nachfolgend finden Sie den Code, mit dem Sie den Timer erstellen können.
http://jsfiddle.net/ayyadurai/GXzhZ/1/
quelle