• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Countdown

doppelpoint

Neues Mitglied
28 März 2018
3
0
1
20
#1
Moins,
ich versuche gerade für unsere Clan Website einen Countdown zu erstellen, der Countdown soll die verbleibende Zeit bis zum nächsten Server Restart anzeigen.
Der Server wird alle 3h Restartet, 03:00, 06:00 ...
d.h. der Countdown soll alle 3h sich selbst wieder zurücksetzen und sich mit der Zeit synchronisieren, würde man um 2 Uhr nachts schauen müsste der Countdown nur noch auf 1h stehen.
Ich hoffe das es verständlich ist, bin bisschen matsch in der Birne nach dem ganzen rumprobieren.
Ich hab das Beispiel versucht:
HTML:
<!-- Display the countdown timer in an element -->
                                <center><p id="demo"></p></center>
                                
                                <script>
                                // Set the date we're counting down to
                                var countDownDate = new Date("Sep 5, 2018 15:37:25").getTime();
                                
                                // Update the count down every 1 second
                                var x = setInterval(function() {
                                
                                // Get todays date and time
                                var now = new Date().getTime();
                                
                                // Find the distance between now an the count down date
                                var distance = countDownDate - now;
                                
                                // Time calculations for days, hours, minutes and seconds
                                var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                                var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                                var seconds = Math.floor((distance % (1000 * 60)) / 1000);
                                
                                // Display the result in the element with id="demo"
                                document.getElementById("demo").innerHTML = hours + "h "
                                + minutes + "m " + seconds + "s ";
                                
                                // If the count down is finished, write some text
                                if (distance < 0) {
                                    clearInterval(x);
                                    document.getElementById("demo").innerHTML = "EXPIRED";
                                }
                                }, 1000);
                                </script>
da läuft das aber nur mit dem new Date, ich bräuchte also einen 3h Intervall und kein Datum.
CSS ist noch für mich neuland :p ich hoffe auf ein Rat.
 

Danielpixelz

Neues Mitglied
27 Juli 2017
12
0
1
27
#3
Array mit allen countdown-endzeitpunkten erstellen (in deinem fall wahrscheinlich 3,6,9,12,15,18,21 uhr) - entweder fix von hand oder für fleißpunkte programmatisch über ne schleife reinpushen.

Dann checken in welchem Intervall wir uns gerade befinden mit einer for/if oder besser switch kombination und des jeweilige array-element ist dann dein countdowndate oben.

Falls es gar nicht klappt schick deinen Ansatz für o.g. array und ich bau Dir den fertigen Code fix fertig.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.061
230
63
65
#4
Ist der Endzeitpunkt des Countdowns regelmäßig alle 3 Stunden, kann man ihn leicht durch einen Algorithmus festlegen:
Code:
    <script>
        var intv = 3;
        var now = new Date();
        var hour = now.getHours();
        var houruntil = hour - (hour % intv) + intv;
        var until = new Date(now.getFullYear(), now.getMonth(), now.getDate(), houruntil);
        console.log(until);
    </script>
 
Zustimmungen: doppelpoint

doppelpoint

Neues Mitglied
28 März 2018
3
0
1
20
#5
so was kurzer zeit mal gehabt. Der counter Zählt immer bis halb. Vieleicht ist das was für dich. Brauchst du ja nur umschreiben bzw anregung holen wie man es machen könnte
http://sebastian1012.bplaced.net/Forum_Scripte/countertest.php
Moin,
sry das ich nicht Antworten konnte hatte viel zu tun die Tage.
Das Beispiel von basti fand ich ganz gut, hab mir den Quellcode kopiert und wollte nun die Halbe Stunde in 3h ändern.
Leider erfolglos... kann mir jemand dabei helfen?
!help
 

basti1012

Aktives Mitglied
26 November 2017
509
46
28
37
#6
Ich hoffe ich habe nix vergessen.
Habe mich an dein Anfangs post gehalten und alle 3 Stunden 3,6,9,12,15,18,21,24 Uhr den Timer gesetzt.
Hätte ich mehr Zeit hätte ich den anders gebaut wo man die Zeiten einfacher wechseln kann.Aber mit etwas geschick ,kann man den auch beliebig anpassen.
Das der Downlink beim Timerende für 300 Sekunden angezeigt wird habe ich gelassen. Kannst die Zeilen dafür ja rauslöschen wenn du das nicht brauchst.
http://sebastian1012.bplaced.net/Forum_Scripte/countertest1.php

Fals noch was ist melde dich einfach.
 
Zustimmungen: doppelpoint

doppelpoint

Neues Mitglied
28 März 2018
3
0
1
20
#7
Ich hoffe ich habe nix vergessen.
Habe mich an dein Anfangs post gehalten und alle 3 Stunden 3,6,9,12,15,18,21,24 Uhr den Timer gesetzt.
Hätte ich mehr Zeit hätte ich den anders gebaut wo man die Zeiten einfacher wechseln kann.Aber mit etwas geschick ,kann man den auch beliebig anpassen.
Das der Downlink beim Timerende für 300 Sekunden angezeigt wird habe ich gelassen. Kannst die Zeilen dafür ja rauslöschen wenn du das nicht brauchst.
http://sebastian1012.bplaced.net/Forum_Scripte/countertest1.php

Fals noch was ist melde dich einfach.

Funktioniert einwandfrei, danke :) //close
 
Top Bottom