Countdown Script?

Hallo liebe bplaced com,

ich habe zum Thema Countdown bereits die SuFu genutzt und leider nichts passendes gefunden deshalb hier ein neues Thema.

Und zwar geht es um folgendes:

Ich möchte einen bzw. mehrere Countdown´s auf einer Seite laufen lassen. Diese sollten immer von einer bestimmten Zeitspanne beispielsweise 3 Tage runterzählen und sobald sie bei 0 angelangt sind wieder von vorne beginnen. Die Anzeige sollte nach Möglichkeit in Tage/Stunden/Minuten und evt Sekunden erfolgen.

Habe schon etwas gegoogelt aber noch nicht wirklich was passendes dazu gefunden.
Hätte hierzu jmd eine Idee bzw. ein Script was anzupassen wäre?
Da ich mich selbst mit PHP und der gleichen noch nicht so lange befasse bin ich für jeden hilfreichen Tipp dankbar :slight_smile:

lg
remu

Wenn wir mal die Möglichkeit von Schaltsekunden vernachlässigen, kannst du doch einfach
die Unix-Zeit des Zieldatums in einer Datei oder in der Datenbank ablegen.

Mit den Zeitfunktionen von PHP rufst du dann jeweils die aktuelle Unix-Zeit ab und bildest
die Differenz zum abgelegten Referenzzeitpunkt etwa in Sekunden oder Millisekunden.
Wenn es keine Referenzzeit gibt, sondern das Gebilde einfach nur drei Tage
herunterzählen soll, reicht es ja offenbar, von einer Differenz von 3 Tagen auszugehen
und man braucht die Unix-Zeit gar nicht abzufragen.

Als nächstes ist die Frage, wie du herunterzählen willst, als Animation? Analog oder Digital?
Am einfachsten geht das vermutlich alles in einer SVG-Datei.
Da kann man dann sowas wie eine Uhr oder einen Zähler animieren, welcher die
Differenzzeit einfach runterzählt.

Willst du das Ergebnis zum Aufruf des Skriptes hingegen nur statisch anzeigen, so kannst
du ja einfach die ermittelte Differenz durch Teilen mit Rest in Tage, Stunden, Minuten, Sekunden
zerlegen. Dazu muß man nur wissen, daß eine Sekunde 1000 Millisekunden hat, eine Minute
60 Sekunden, eine Stunde 60 Minuten, ein Tag 24 Stunden - alles aufmultipliziert gibt die Dauer
eines Tages in Sekunden, beziehungsweise Millisekunden. Differenz Modulo Tagesdauer gibt
dann doch offenbar die ganzen Tage, der Rest kann dann durch Modulo mit dem Stundenwert
etc ermittelt werden.

Will man die Animation entsprechend zerlegen, muß man bei solch einer SVG-Uhr nur die
Startpositionen und die Animationsdauern, Start- und Endzeiten pro animiertem Objekt
entsprechend mit den zerlegten Werten einstellen.
Beginnt das Herunterzählen immer bei 0 oder -3Tagen, ist die Startposition offenbar immer
gleich.
Wiederholungen kann man bei SVG-Animationen einfach mit einem Attribut angeben
(repeatDur=“indefinite”)

Also alles ohne große Tricks Schritt für Schritt umsetzbar…
Wenn du ohne Referenzzeit auskommst, also immer 3 Tage ab Aufruf der Datei herunterzählen
willst, brauchst du nicht einmal PHP, da reicht eine einfache SVG-Datei.
PHP wird benötigt, wenn eine bestimmte Start- und Endzeit gefordert ist oder diese oder die
Gesamtzeit des Zählens unterschiedlich sind.

Nur - wer guckt sich drei Tage oder länger einen Zähler an?

Hallo hoffmann,

danke für die rasche und ausführliche Antwort :slight_smile:
Am besten wäre es einen Zähler zu animieren. Wie du dazu noch angemerkt hast wäre das mit einer SVG-Datei realisierbar.

Dazu hätte ich auch noch eine Frage. Wie du unten erwähnt hast, dass
ab einem Aufruf der Datei heruntergezählt wird, brauche ich nicht zwingend PHP, da eine einfache SVG-Datei ausreicht. Funktioniert auch ein dauerhaftes runterzählen der Datei auch wenn sie nicht gerade aufgerufen wird?

Da ich mich mit SVG leider überhaupt nicht auskenne, aber das eventuelle eine Möglichkeit wäre mein Anliegen umzusetzen, hierzu nochmals eine Frage.
Ist mein gewünschtes Beispiel schon zu komplex für einen Laien oder nach Übungen und investierter Zeit durchaus umzusetzen? Denn mich würde auch die Umsetzung interessieren und nicht “nur” das Endergebnis :slight_smile:

lg
remu

Runterzählen ab einem festen Termin funktioniert formal schon bei SVG, für sowas gibt es eine
Möglichekeit, die Anfangszeit einer Animation als Datum anzugeben (wallclock), unter den
gängigen Darstellungsprogrammen ist das aber nur bei batik/Squiggle implementiert
(kennst du nicht? - also aufgrund von mangelhaften Programmen dann eher nicht brauchbar ;o)

Der Ausweg findet sich dann über PHP.
Bei SVG-Animationen ist die Zeit 0 jene, wo das Dokument geladen wird.
Bei Animationen kann man aber auch negative Startzeiten angeben.
Daher muß man also mit PHP nur gucken, wo die gewünschte Startzeit relativ zur Zeit des
Dokumentaufrufes liegt und damit dann die Startzeit in der SVG-Datei anlegen.
Die meisten gängigen SVG-Animationsfähigen Programme werden damit fertig.
Wenn man noch vorsichtiger vorgehen will, verwendet man nur positive Startzeiten oder
rechnet sich aus, welches die Startpositionen zum Zeitpunkt 0 sind - beides benötigt etwas
mehr Überlegung als die negativen Startzeiten, ist aber eigentlich recht gut umzusetzen.

Wie kompliziert das ist, hängt etwas davon ab, wie man das umsetzen will.
Sowas wie eine rückwärts drehende analoge Uhr ist recht einfach - ein paar Zeiger werden
einfach gedreht, also pro Zeiger ein Animationselement.
Digitale Anzeigen sind etwas trickreicher, am besten man tauscht da jede Ziffer einzeln mit
einer eigenen diskreten Animation, ist aber auch machbar, im Schnitt hat man nur etwas mehr
Ziffern als Zeiger an einer analogen Uhr.
Für nicht animationsfähige Programme könnte man da sogar eine Alternative mit ecmascript
anbieten, wenn man das für sinnvoll und notwendig hält.

Auf meiner Seite im SVG-Bereich gibt es Anleitungen für analoge Uhren und digitale Zähler.
Wenn man dem folgt, sollten Grundkenntnisse in SVG reichen, um das umzusetzen.
Ansonsten ist das SVG-Wikibuch (wo ich auch einer der Hauptautoren bin) eine deutlich
ausführlichere Anleitung zu SVG als jene auf meiner Seite:
de.wikibooks.org/wiki/SVG
Zähler und Uhren gibt es da im Animationskapitel auch, aber nicht mit PHP initialisiert natürlich ;o)

Vielen Dank wieder einmal für die schnelle Antwort :wink:

Ich werde mir das genau ansehn und mich daran versuchen !coffee ,
sollten Probleme auftreten melde ich mich ggf. hier nochmals :slight_smile:

lg