Timer speichern bei Neuladen

Gurke258 · 15. Februar 2020

Hallo zusammen

Ich komme bei meinem "kleinen" Projekt nicht mehr weiter. Habe leider auch nicht so die Kenntnisse in Javascript.

Aktuell stehe ich vor folgendem Probelm:

Auf meiner Website werden Timer aktiviert per Checkbox, welche dann eine Zeit x herunter laufen. Allerdings soll bei dem laden der Seite der aktuelle Timer nicht abgebrochen werden, sondern weiterlaufen und erst resettet werden wenn ich die Checkbox deaktiviere.

Folgenden Code besitze ich:

Javascript:

Code

<!--
function TimerUnter() {

    var isChecked = document.getElementById("unter").checked;
    var minutes = $( "#unter" ).val();
    var target_date = new Date().getTime() + ((minutes * 60 ) * 1000); // set the countdown date
    var time_limit = ((minutes * 60 ) * 1000);


//set actual timer
setTimeout(
  function() 
  {
    //alert( 'done' );
  }, time_limit );



var days, hours, minutes, seconds; // variables for time units

var countdown = document.getElementById("tiles"); // get tag element


if (isChecked == true){ 


getCountdown();

setInterval(function () { getCountdown(); }, 1000);

function getCountdown(){

    // find the amount of "seconds" between now and target
    var current_date = new Date().getTime();
    var seconds_left = (target_date - current_date) / 1000;
  
if ( seconds_left >= 0 ) {
  console.log(time_limit);
   if ( (seconds_left * 1000 ) < ( time_limit / 2 ) )  {
     $( "#tiles" ).removeClass("color-full");
     $( "#tiles" ).addClass("color-half");

        } 
    if ( (seconds_left * 1000 ) < ( time_limit / 4 ) )  {
        $( "#tiles" ).removeClass("color-half");
        $( "#tiles" ).addClass("color-empty");
    }
  
    days = pad( parseInt(seconds_left / 86400) );
    seconds_left = seconds_left % 86400;
         
    hours = pad( parseInt(seconds_left / 3600) );
    seconds_left = seconds_left % 3600;
          
    minutes = pad( parseInt(seconds_left / 60) );
    seconds = pad( parseInt( seconds_left % 60 ) );

    // format countdown string + set tag value
    countdown.innerHTML = "<span>" + hours + ":</span><span>" + minutes + ":</span><span>" + seconds + "</span>"; 
}
  
}

function pad(n) {
    return (n < 10 ? '0' : '') + n;
}
}

else if (isChecked == false){ 

$( "#tiles" ).removeClass("color-empty");
$( "#tiles" ).addClass("color-full");

}
}
-->

Alles anzeigen

Ich gebe auch zu das dieser Code nicht von mir ist sondern von einer Website und ich habe ihn ein bisschen modifiziert für meine Anwenung.

HTML:

Code

<div class="toggle text">
                    <label style="left: -1.5em;"> Unter
                    <input type="checkbox" id="unter" value="180" onclick="TimerUnter()"> <span class="slider"></span> </label>
                </div>
                <br>
                <div id="countdown">
                <div id="tiles" class="color-full"></div>
                </div>

Villt kann mir hier jmd weiterhlefen

Sempervivum · 15. Februar 2020

Ich empfehle, den Stand der Timer im Localstorage oder Sessionstorage zu speichern:

https://wiki.selfhtml.org/wiki/JavaScript/Web_Storage

Gurke258 · 16. Februar 2020

Danke das kann ich mir ja mal anschauen allerdings weiß ich nicht direkt wie ich es umschreibe, sodass die "zeit" die gespeichert ist aufgerufen wird und nicht nue gezählt wird

Sempervivum · 16. Februar 2020

Ich habe es mal grob ergaenzt, aber ohne es zu testen:

Code

    <div class="toggle text">
        <label style="left: -1.5em;"> Unter
            <input type="checkbox" id="unter" value="180" onclick="TimerUnter()"> <span class="slider"></span> </label>
    </div>
    <br>
    <div id="countdown">
        <div id="tiles" class="color-full"></div>
    </div>
    <script>
        // Parameter "onload" hinzu gefuegt, dieser gibt an, dass die Funktion 
        // beim Laden der Seite aufgerufen wurde
        function TimerUnter(onload) {
            var isChecked = true;
            if (onload) {
                // Die Funktion wurde beim Laden der Seite aufgerufen
                // Endezeit aus dem localStorage auslesen
                var target_date = localStorage.getItem('target_date');
                if (!targetDate) {
                    // Keine Endezeit vorhanden: Der Timer wird nicht gestartet
                    isChecked = false;
                } else {
                    // Endezeit vorhanden: Zeitdifferenz berechnen
                    var time_limit = target_date - Date.now();
                }
            } else {
                // Die Funktion wurde beim Klick auf die Checkbox aufgerufen:
                // Parameter für den Timer aus dem Minutenwert ermitteln
                var isChecked = document.getElementById("unter").checked;
                var minutes = $("#unter").val();
                var time_limit = minutes * 60 * 1000;
                var target_date = new Date().getTime() + ((minutes * 60) * 1000); // set the countdown date
                // Endezeit in den Localstorage eintragen
                localStorage.setItem('target_date', target_date);
            }

            //set actual timer
            setTimeout(
                function () {
                    //alert( 'done' );
                }, time_limit);
            var days, hours, minutes, seconds; // variables for time units
            var countdown = document.getElementById("tiles"); // get tag element
            if (isChecked == true) {
                getCountdown();
                setInterval(function () { getCountdown(); }, 1000);
                function getCountdown() {
                    // find the amount of "seconds" between now and target
                    var current_date = new Date().getTime();
                    var seconds_left = (target_date - current_date) / 1000;

                    if (seconds_left >= 0) {
                        console.log(time_limit);
                        if ((seconds_left * 1000) < (time_limit / 2)) {
                            $("#tiles").removeClass("color-full");
                            $("#tiles").addClass("color-half");
                        }
                        if ((seconds_left * 1000) < (time_limit / 4)) {
                            $("#tiles").removeClass("color-half");
                            $("#tiles").addClass("color-empty");
                        }

                        days = pad(parseInt(seconds_left / 86400));
                        seconds_left = seconds_left % 86400;

                        hours = pad(parseInt(seconds_left / 3600));
                        seconds_left = seconds_left % 3600;

                        minutes = pad(parseInt(seconds_left / 60));
                        seconds = pad(parseInt(seconds_left % 60));
                        // format countdown string + set tag value
                        countdown.innerHTML = "<span>" + hours + ":</span><span>" + minutes + ":</span><span>" + seconds + "</span>";
                    }

                }
                function pad(n) {
                    return (n < 10 ? '0' : '') + n;
                }
            }
            else if (isChecked == false) {
                $("#tiles").removeClass("color-empty");
                $("#tiles").addClass("color-full");
            }
            // Funktion mit gesetztem Parameter "onload" aufrufen
            TimerUnter(true);
        }
    </script>

Alles anzeigen

Gurke258 · 16. Februar 2020

Vielen vielen Dank für die Mühe

Leider funktioniert es nicht Kann es sein das ich villt i.wo noch was einstellen muss oder eine andere jQuery benutzen muss? Habe aktuell diese:

Code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Und das ganze läuft auf einem Raspberry Pi 3B+, falls das ausschlaggebend ist

Sempervivum · 16. Februar 2020

Ja, das war ja nicht getestet und es waren noch Fehler drin, vor allem, dass die Funktion TimerUnter() beim Laden der Seite gar nicht aufgerufen wurde.

Dies ist jetzt getestet und funktioniert soweit, dass der Timer-Wert gespeichert und beim Neuladen wieder eingelesen wird:

Code

    <div class="toggle text">
        <label style="left: -1.5em;"> Unter
            <input type="checkbox" id="unter" value="180" onclick="TimerUnter()"> <span class="slider"></span> </label>
    </div>
    <br>
    <div id="countdown">
        <div id="tiles" class="color-full"></div>
    </div>
    <script>
        // Parameter "onload" hinzu gefuegt, dieser gibt an, dass die Funktion 
        // beim Laden der Seite aufgerufen wurde
        function TimerUnter(onload) {
            thecb = document.getElementById('unter');
            thetiles = document.getElementById('tiles');
            var isChecked = true;
            if (onload) {
                // Die Funktion wurde beim Laden der Seite aufgerufen
                // Endezeit aus dem localStorage auslesen
                var target_date = localStorage.getItem('target_date');
                if (!target_date) {
                    // Keine Endezeit vorhanden: Der Timer wird nicht gestartet
                    isChecked = false;
                } else {
                    // Endezeit vorhanden: Zeitdifferenz berechnen
                    var time_limit = target_date - Date.now();
                }
            } else {
                // Die Funktion wurde beim Klick auf die Checkbox aufgerufen:
                // Parameter für den Timer aus dem Minutenwert ermitteln
                var isChecked = thecb.checked;
                var minutes = thecb.value;
                var time_limit = minutes * 60 * 1000;
                var target_date = Date.now() + time_limit; // set the countdown date
                // Endezeit in den Localstorage eintragen
                localStorage.setItem('target_date', target_date);
            }

            //set actual timer
            setTimeout(
                function () {
                    //alert( 'done' );
                }, time_limit);
            var days, hours, minutes, seconds; // variables for time units
            var countdown = thetiles; // get tag element
            if (isChecked == true) {
                getCountdown();
                setInterval(function () { getCountdown(); }, 1000);
                function getCountdown() {
                    // find the amount of "seconds" between now and target
                    var current_date = new Date().getTime();
                    var seconds_left = (target_date - current_date) / 1000;

                    if (seconds_left >= 0) {
                        console.log(time_limit);
                        if ((seconds_left * 1000) < (time_limit / 2)) {
                            thetiles.classList.remove("color-full");
                            thetiles.classList.add("color-half");
                        }
                        if ((seconds_left * 1000) < (time_limit / 4)) {
                            thetiles.classList.remove("color-half");
                            thetiles.classList.add("color-empty");
                        }

                        days = pad(parseInt(seconds_left / 86400));
                        seconds_left = seconds_left % 86400;

                        hours = pad(parseInt(seconds_left / 3600));
                        seconds_left = seconds_left % 3600;

                        minutes = pad(parseInt(seconds_left / 60));
                        seconds = pad(parseInt(seconds_left % 60));
                        // format countdown string + set tag value
                        countdown.innerHTML = "<span>" + hours + ":</span><span>" + minutes + ":</span><span>" + seconds + "</span>";
                    }

                }
                function pad(n) {
                    return (n < 10 ? '0' : '') + n;
                }
            }
            else {
                thetiles.classList.remove("color-empty");
                thetiles.classList.add("color-full");
            }
        }
        // Funktion mit gesetztem Parameter "onload" aufrufen
        TimerUnter(true);
    </script>

Alles anzeigen

Gurke258 · 16. Februar 2020

Yeah Vielen Dank

Es funktioniert

ich habe allerdings noch eine kleine Frage:

Wenn ich jetzt bei der "Checkbox" den Haken rausnehme bzw ich habs ja über nen slider, den auf Off stelle das dann der Timer abbricht und ich ihn erst wieder starten kann wenn ich den slider auf ON stelle.

Also praktisch eine Reset-funktion

Wie kann man das am besten realisieren?

Sempervivum · 16. Februar 2020

Um den Timer mit clearInterval() wieder löschen zu können, muss man ihn in einer Variablen speichern:

Code

    <script>
        // Timervariable fuer das SetInterval
        var timer;
        // Parameter "onload" hinzu gefuegt, dieser gibt an, dass die Funktion 
        // beim Laden der Seite aufgerufen wurde
        function TimerUnter(onload) {
            thecb = document.getElementById('unter');
            thetiles = document.getElementById('tiles');
            var isChecked = true;
            if (onload) {
                // Die Funktion wurde beim Laden der Seite aufgerufen
                // Endezeit aus dem localStorage auslesen
                var target_date = localStorage.getItem('target_date');
                if (!target_date) {
                    // Keine Endezeit vorhanden: Der Timer wird nicht gestartet
                    isChecked = false;
                } else {
                    // Endezeit vorhanden: Zeitdifferenz berechnen
                    var time_limit = target_date - Date.now();
                }
            } else {
                // Die Funktion wurde beim Klick auf die Checkbox aufgerufen:
                // Parameter für den Timer aus dem Minutenwert ermitteln
                var isChecked = thecb.checked;
                var minutes = thecb.value;
                var time_limit = minutes * 60 * 1000;
                var target_date = Date.now() + time_limit; // set the countdown date
                // Endezeit in den Localstorage eintragen
                localStorage.setItem('target_date', target_date);
            }

            //set actual timer
            setTimeout(
                function () {
                    //alert( 'done' );
                }, time_limit);
            var days, hours, minutes, seconds; // variables for time units
            var countdown = thetiles; // get tag element
            if (isChecked == true) {
                getCountdown();
                // Timer starten
                timer = setInterval(getCountdown, 1000);
                function getCountdown() {
                    // find the amount of "seconds" between now and target
                    var current_date = new Date().getTime();
                    var seconds_left = (target_date - current_date) / 1000;

                    if (seconds_left >= 0) {
                        console.log(time_limit);
                        if ((seconds_left * 1000) < (time_limit / 2)) {
                            thetiles.classList.remove("color-full");
                            thetiles.classList.add("color-half");
                        }
                        if ((seconds_left * 1000) < (time_limit / 4)) {
                            thetiles.classList.remove("color-half");
                            thetiles.classList.add("color-empty");
                        }

                        days = pad(parseInt(seconds_left / 86400));
                        seconds_left = seconds_left % 86400;

                        hours = pad(parseInt(seconds_left / 3600));
                        seconds_left = seconds_left % 3600;

                        minutes = pad(parseInt(seconds_left / 60));
                        seconds = pad(parseInt(seconds_left % 60));
                        // format countdown string + set tag value
                        countdown.innerHTML = "<span>" + hours + ":</span><span>" + minutes + ":</span><span>" + seconds + "</span>";
                    }

                }
                function pad(n) {
                    return (n < 10 ? '0' : '') + n;
                }
            }
            else {
                thetiles.classList.remove("color-empty");
                thetiles.classList.add("color-full");
                clearInterval(timer); // Timer löschen
            }
        }
        // Funktion mit gesetztem Parameter "onload" aufrufen
        TimerUnter(true);
    </script>

Alles anzeigen

Sempervivum · 16. Februar 2020

Die Änderungen:

In Zeile 3 die Timervariable definieren.

In Zeile 42 den Timer in der Variablen speichern.

In Zeile 75 den Timer löschen. Dies musst Du wahrscheinlich noch ergänzen durch das Löschen der Ausgabe in div#countdown.

Gurke258 · 16. Februar 2020

Ich hab das jetzt alles eingefügt aber leider lässt er sich nicht zurücksetzen. Das mit dem löschen hab ich auch gemacht aber leider gehts nicht

Sempervivum · 16. Februar 2020

Wie vorhin, war nicht getestet. Ich habe noch einige Anweisungen hinzu gefügt und hoffe, dass es jetzt unter allen Bedingungen läuft:

Code

    <script>
        // Timervariable fuer das SetInterval
        var timer;
        // Parameter "onload" hinzu gefuegt, dieser gibt an, dass die Funktion 
        // beim Laden der Seite aufgerufen wurde
        function TimerUnter(onload) {
            thecb = document.getElementById('unter');
            thetiles = document.getElementById('tiles');
            var isChecked = true;
            if (onload) {
                // Die Funktion wurde beim Laden der Seite aufgerufen
                // Endezeit aus dem localStorage auslesen
                var target_date = localStorage.getItem('target_date');
                if (!target_date) {
                    // Keine Endezeit vorhanden: Der Timer wird nicht gestartet
                    isChecked = false;
                } else {
                    // Endezeit vorhanden: Zeitdifferenz berechnen
                    var time_limit = target_date - Date.now();
                    thecb.checked = true;
                }
            } else {
                // Die Funktion wurde beim Klick auf die Checkbox aufgerufen:
                // Parameter für den Timer aus dem Minutenwert ermitteln
                var isChecked = thecb.checked;
                var minutes = thecb.value;
                var time_limit = minutes * 60 * 1000;
                var target_date = Date.now() + time_limit; // set the countdown date
                // Endezeit in den Localstorage eintragen
                localStorage.setItem('target_date', target_date);
            }

            //set actual timer
            setTimeout(
                function () {
                    //alert( 'done' );
                }, time_limit);
            var days, hours, minutes, seconds; // variables for time units
            var countdown = thetiles; // get tag element
            if (isChecked == true) {
                getCountdown();
                // Timer starten
                timer = setInterval(getCountdown, 1000);
                function getCountdown() {
                    // find the amount of "seconds" between now and target
                    var current_date = new Date().getTime();
                    var seconds_left = (target_date - current_date) / 1000;

                    if (seconds_left >= 0) {
                        console.log(time_limit);
                        if ((seconds_left * 1000) < (time_limit / 2)) {
                            thetiles.classList.remove("color-full");
                            thetiles.classList.add("color-half");
                        }
                        if ((seconds_left * 1000) < (time_limit / 4)) {
                            thetiles.classList.remove("color-half");
                            thetiles.classList.add("color-empty");
                        }

                        days = pad(parseInt(seconds_left / 86400));
                        seconds_left = seconds_left % 86400;

                        hours = pad(parseInt(seconds_left / 3600));
                        seconds_left = seconds_left % 3600;

                        minutes = pad(parseInt(seconds_left / 60));
                        seconds = pad(parseInt(seconds_left % 60));
                        // format countdown string + set tag value
                        countdown.innerHTML = "<span>" + hours + ":</span><span>" + minutes + ":</span><span>" + seconds + "</span>";
                    }

                }
                function pad(n) {
                    return (n < 10 ? '0' : '') + n;
                }
            }
            else {
                thetiles.classList.remove("color-empty");
                thetiles.classList.add("color-full");
                thetiles.innerHTML = '';
                clearInterval(timer); // Timer löschen
                localStorage.removeItem('target_date');
            }
        }
        // Funktion mit gesetztem Parameter "onload" aufrufen
        TimerUnter(true);
    </script>

Alles anzeigen

Gurke258 · 16. Februar 2020

Okay super danke es funktioniert jetzt Aber nur wenn ich den slider auf Off stelle und dann neulade, dann ist der Timer zurückgesetzt.

Naja ich kann ja noch nen Timer mit setInterval(function (){}); drumrum setzen das alle sekunde die seite nue geladen wird

oder gibts ne elegantere Lösung?

EDIT:

Hab vergessen den Codeabschnitt einzufügen:

Code

thetiles.innerHTML = '';

Damit löscht er zwar beim slide auf OFF den Timer aber nur für 1 Sekunde, dann ist er wieder da

Sempervivum · 16. Februar 2020

Zitat

Damit löscht er zwar beim slide auf OFF den Timer aber nur für 1 Sekunde, dann ist er wieder da

Das lässt vermuten, dass der Timer nicht wirklich angehalten wird. Du schreibst da von einem "slide" - ich habe in meiner Testdatei ja einen Checkbutton verwendet. Möglicher Weise hast Du da etwas nicht angepasst?

Gurke258 · 16. Februar 2020

Ah habs problem gefunden... ich hab die

var timer in die funktion mit rein weil ich das ganze 5 mal habe, also 5 Timer.. werde jetzt einfach 5 timer Variablen machen und die einfach oben deklarieren

Edit:

so gehts jetzt

Vielen vielen Dank für die ganze Hilfe

Sempervivum · 16. Februar 2020

Gern geschehen!

Zitat

Hatte vorher nur die änderungen rauskopiert und eingefügt xD

Dann hatte ich bei der Beschreibung wohl etwas vergessen.

Sempervivum · 17. Februar 2020

Zitat

var timer in die funktion mit rein weil ich das ganze 5 mal habe, also 5 Timer

Eigentlich wäre das die beste Methode, man hat dann nur das Problem, dass sie bei einem erneuten Aufruf nicht mehr greifbar ist. Man müsste das Ganze dann objektorientiert anlegen, d. h. diese Variable im Objekt definieren, das nur einmal erzeugt wird. Und dann die Funktionen darin, die nötig sind.

Zitat

werde jetzt einfach 5 timer Variablen machen und die einfach oben deklarieren

Das ist sicher möglich, aber wahrscheinlich wirst Du dann auch Teile des Javascript vervielfachen müssen. IMO nicht so günstig und ich würde den objektorientierten Ansatz vorziehen.

Arne Drews · 17. Februar 2020

Also wenn ich den Eingangspost richtig gelesen habe, gibt es ein Eingabefeld, in dem man eine Zahl ( Sekunden? ) eingibt, die als Timer-Laufzeit interpretiert wird. Bei Klick auf eine Checkbox soll der Timer dann die Anzahl der Sekunden runterlaufen.

Ich würde dafür ebenfalls das localStorage nutzen, allerdings würde ich den Zeitstempel, bis wann der Timer laufen soll und den Zeitstempel, wo der Timer ich gerade befindet darin speichern. Die Differenz beider Zeitstempel ist der Timer-Wert.

Das hat den Vorteil, dass der Timer auch dann relativ genau ist, wenn der Reload der Seite ggf. mal 2 bis 3 Sekunden dauert.

Nach dem Reload dann als erstes den Timerstand mit dem aktuellem Datums-Zeitstempel überschreiben und sofern erforderlich den Timer weiterlaufen lassen.

Zeitstempel geht ganz einfach mit Date.now(), wbei es sich da um Milisekunden handelt. Date.now() + 2000 sind also + 2 Sekunden.

D.h., wenn ich meinen Timer auf 30 Sekunden setze, setze ich mir als Ziel-Zeitstempel Date.now() + 30000. Solange der aktuelle Zeitstempel < diesem Wert ist, läuft der Timer.

So zumindest, wenn ich den Eingangspost richtig verstanden habe.

Ich habe mir nicht jedes Detail der Code-Wülste hier angesehen, aber das ginge deutlich reduzierter, wenn wir von derselben Sache reden.

Gurke258 · 17. Februar 2020

Zitat von Sempervivum

Eigentlich wäre das die beste Methode, man hat dann nur das Problem, dass sie bei einem erneuten Aufruf nicht mehr greifbar ist. Man müsste das Ganze dann objektorientiert anlegen, d. h. diese Variable im Objekt definieren, das nur einmal erzeugt wird. Und dann die Funktionen darin, die nötig sind.

Das ist sicher möglich, aber wahrscheinlich wirst Du dann auch Teile des Javascript vervielfachen müssen. IMO nicht so günstig und ich würde den objektorientierten Ansatz vorziehen.

Ja ich habe das ganze jetzt 5x hintereinander Aber mehr kommt auch nicht wirklich auf die Seite

Zitat von Arne Drews

Das hat den Vorteil, dass der Timer auch dann relativ genau ist, wenn der Reload der Seite ggf. mal 2 bis 3 Sekunden dauert.

Das ist kein Problem denn die Timer gehen mind. 1,5h da kommt es auf die sekunde nicht ganz genau an

Zitat von Arne Drews

Also wenn ich den Eingangspost richtig gelesen habe, gibt es ein Eingabefeld, in dem man eine Zahl ( Sekunden? ) eingibt, die als Timer-Laufzeit interpretiert wird. Bei Klick auf eine Checkbox soll der Timer dann die Anzahl der Sekunden runterlaufen.

Nein die Zeit ist fest vorgegeben in dem Feld:

Code

<input type="checkbox" id="unter" value="180" onclick="TimerUnter()"> <span class="slider"></span> </label>

value = 180 minuten

Arne Drews · 17. Februar 2020

Zitat von Gurke258

Das ist kein Problem denn die Timer gehen mind. 1,5h da kommt es auf die sekunde nicht ganz genau an

Wenn Du die Seite innerhalb der 180 Minuten ( was übrigens 3 Stunden sind und nicht 1,5 ) ca. 30x neu lädst, ist das bei einer durchschnittl. Ladezeit von 2 Sek. schon eine Minute Verzögerung. Es muss ja nicht 100%ig sein, aber wenn Dir das schon egal ist, kann man einen Timer auch ganz in Frage stellen.

Gurke258 · 17. Februar 2020

Ja ich sag ja mind. 1,5h

Naja die Timer dienen nur als Erinnerung für Sachen

Timer speichern bei Neuladen

Jetzt mitmachen!

Teilen