Countdown Timer zu Objekten (Angebote & Events) mit standardisierten Laufzeiten

  • Hallo,

    ich bin gerade dabei mein erstes Webprojekt auf Basis von Laravel zu starten. Da ich mich selbst noch als blutiger Anfänger sehe, hoffe ich mal das ich meine Problemstellung verständlich darlegen kann.


    Nachdem ich die Erstellung und die Anzeige von Angeboten und Events fertiggestellt habe, möchte ich diesen nun aktivierbare fixe Countdowns (z. B. eine Stunde, ein Tag, 3 Tage) hinzufügen. Nach wochenlanger Recherche und ausprobieren, bin ich leider noch zu keiner funktionierenden Lösung gekommen und hab nur noch wenig Resthoffnung:/. Deshalb wäre ich für jeden Tipp sehr dankbar.


    Nun zu den benötigten Funktionen des Countdowns:

    • per Klick auf einen Button de-/aktivierbar
      • Buttons müssen unterschiedliche Laufzeiten (nicht benutzerdefiniert, sondern starr vorgegeben) aktivieren
        • z. B. ein Button 1 Std. und ein Anderer 3 Tage
    • verbliebene Zeit darf durch neu laden der Seite nicht wieder auf den Startwert gesetzt werden
    • [muss einem Objekt (z. B. Angebot oder Event) zugeordnet werden können]
    • [sollte bei Aktivierung das Angebot auf aktiv (1) und durch Zeitablauf (automatisch) oder per Klick (manuell) auf deaktiv (0) schalten]

    Nice-to-Haves aber nicht zwingend notwendig:

    • Der Countdown sollte sich im Idealfall ohne neu laden der Seite aktualisieren
    • Unterscheidung in der Anzeige nach Restlaufzeit
      • Über 24 Std.: X Tage
      • Unter 24: Std.: XX:XX:XX (Std:Min:Sek)

    Der Punkt auf dem I (Traum:love:):

    • Perfekt wäre es, wenn der Countdown in zwei Teile unterteilt werden könnte
      • 1. Angebot beginnt in: XX:XX Min (z. B. 30 Min)
      • 2. Angebot endet in: X Tage oder XX:XX:XX (z. B. 3 Std oder 3 Tage)

    Vielen Dank an alle die bis hierhin gelesen haben :thumbup:.

    Für jeden Tipp und vor allem Verlinkungen auf (deutsch- oder englischsprachige) Websites mit Code zu Countdowns, welche zumindest Teile der benötigten Funktionen beinhalten, würde ich mich sehr freuen :).

    Ich schätze mal, dass die Funktionen in den eckigen Klammern [] über Beispielcode schwer abzubilden ist, habe es aber trotzdem mal angegeben um mein Problem möglichst genau zu erläutern.

  • Hi Stef,

    vielen Dank für deine Antwort und die Grüße:).


    Also Laravel ist ja an sich nur das Framework. Hab das eigentlich nur erwähnt um ein möglichst anschauliches Gesamtbild zu zeichnen. Den Teil kann man sich an sich auch wegdenken;).

    Mir geht es hier ja eigentlich ausschließlich um den Countdown. Dafür gibt es, soweit ich weiß, nichts in der Laravel-Dokumentation. Deshalb schätze ich, dass die Lösung aus einer Mischung von php und javascript oder nur php bzw. nur javascript bestehen muss.

    Alle Countdowns, die ich bisher gefunden habe sind entweder nicht dynamisch (starten beim neu laden der Seite wieder von Beginn) oder funktionieren nur mit der Eingabe eines bestimmten Datums (z. B. 01.01.2021 00:00 Uhr).

    Ich brauche dagegen einen Countdown, der bei einem Event (z. B. Klick auf einen Button) eine bestimmte Zeit (z. B. 3 Stunden) ablaufen lässt. Im Prinzip ähnlich zu der Zeitangabe ("Gestern", "Vor einer Stunde", "Vor 26 Minuten") über unseren Forenbeiträgen auf dieser Seite. Nur eben anders herum ("Endet in: 26 Minuten", "Beginnt in einer Stunde" usw.). Aber hier wird ja auch mit einem Event (Erstellung eines Forenbeitrags) eine Zeitmessung begonnen.

    Wenn es dazu irgendwas gebe würde mir das schon extrem weiterhelfen:).


    Beste Grüße

  • Hi,

    dies geht eigentlich ganz einfach.

    Nehmen wir mal an, dass du Bereiche hast in denen die Ablaufzeit unterschiedlich ist. Im PHP-Skript legst du die Ablaufzeiten der verschiedenen Bereiche fest und wählst daraus die Ablaufzeit des ausgewählten Bereiches - Beispiel: Event. Nun erfasst du diese Zeit mittels JavaScript (XMLHttpRequest/Ajax). Dann erstellst du eine Funktion die 1 Sekunde der Zeit abzieht. Diese Funktion führst du dann in window.setInterval() jede Sekunde aus, speicherst die neue Zeit ab und gibst diese aus.


    Dann führst du je nach Zeit zusätzlich jede X-Minuten eine weitere Funktion in window.setInterval() aus die überprüft ob die Zeit abgelaufen ist - ist dies der Fall wird über ein HTTP Request an das PHP-Skript ein Wert gesendet auf den du prüfst und dementsprechend agierst.


    Oder


    Du prüfst im ersten window.setInterval() ob die Zeit abgelaufen ist und sendest über diese den Wert an das PHP-Skript welches es prüft.


    Grüße

  • Vielen Dank für die schnelle Rückmeldung.


    Was meinst du denn genau mit Ablaufzeit? Ein Datum mit Uhrzeit oder eine Zeitspanne? In der PHP-Dokumentation finde ich eigentlich nur Funktionen, die sich auf eine Uhrzeit oder ein Datum beziehen.

  • Vielen Dank für den Link.

    Das werde ich mir dann mal genauer ansehen. Sieht grundsätzlich erstmal sehr vielversprechend:).

    Kann ich den Countdown denn auch an ein Objekt (z. B. Forenbeitrag) anbinden?

    Funktioniert er grundsätzlich auch ohne ein festes Zieldatum (wie in diesem Fall den 01.01.2022) bzw. kann ich stattdessen als Zieldatum das Datum "Jetzt+2 Stunden" oder "morgen zur selben Uhrzeit" festlegen?

  • Stimmt! Den hatte ich bis dahin tatsächlich noch nicht gesehen.

    Aber besten Dank für diesen Countdown! Das ist wohl jetzt wirklich das, was ich die ganze Zeit die ganze Zeit gesucht habe. Den Rest sollte ich nun tatsächlich selbst anpassen können.

    Könnte mir vorstellen, dass du ordentlich Klicks sammeln könntest, wenn du dazu ein YouTube-Video erstellst;). Insbesondere wenn Du es auf Englisch machst. Auf Deutsch ist das meist schwierig. Da gibt es, wie ich finde, generell echt tolle Videos mit relativ wenigen Klicks.

  • Um solche Tutorials zu erstellen sollte man noch mehr erfahrung haben.

    So ein Counter sollte man am Ende der Anfängerzeit hinbekommen.


    Der Code ist sicherlich auch noch nicht Optimal.

    Man könnte den noch kürzen und bestimmt noch anders Optimieren.


    Aber so hast du mal ein Ansatz wie es gehen könnte und wonach du dann Googeln müßtest damit du das vieleicht auf dein Laravel anpassen kannst.

    Ich kenne das Laravel nicht sonst hätte da vieleicht weiter helfen können.