Beiträge von Sempervivum

Sempervivum

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

Sempervivum

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.

Sempervivum

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

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

Sempervivum

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

Sempervivum

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

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

Sempervivum

Versuche diesen Code, sollte besser funtionieren:

Code

    <script type="text/javascript">
        window.addEventListener('load', function () {
            changeColors();
        });
        window.addEventListener('click', function (event) {
            if (event.target.classList.contains('paginate_button'))
                changeColors();
        });
        function changeColors() {
            var tds = document.querySelectorAll('body.player-template-default.single.single-player table.dataTable.visualizer-data-table tbody > tr > td');
            for (var i = 0; i < tds.length; i++) {
                if (tds[i].innerText === 'W') tds[i].parentElement.style.backgroundColor = '#9ed7b6';
                else if (tds[i].innerText === 'L') tds[i].parentElement.style.backgroundColor = '#f4a6a6';
                else if (tds[i].innerText === 'D') tds[i].parentElement.style.backgroundColor = '#f4dda6';
                else if (tds[i].innerText === 'Total') {
                    tds[i].parentElement.style.fontWeight = 'bold';
                    tds[i].parentElement.style.backgroundColor = '#AFDBF1';
                }
            }
        }
    </script>

Alles anzeigen

Sempervivum

Gern geschehen, gute Nacht!

Sempervivum

Wie gesagt, ziemlich unschön jetzt. Aber ich vermute, Du bist zufrieden, wenn es so läuft. Ich habe auch schon eine Lösung, wie man es richtig machen kann, musst Du entscheiden, ob wir der Sache noch nachgehen sollen. Aber heute nicht mehr, ist schon spät.

Sempervivum

Nicht die ganze Zeile, sondern nur das if, also statt

if (this != window) this.addEventListener('click', changeColors);

so

this.addEventListener('click', changeColors);

Sempervivum

Dann müssen wir das wieder heraus nehmen. Die letzte Anweisung also wieder so:

this.addEventListener('click', changeColors);

d. h. ohne vorher das window abzufragen. Das ist aber jetzt ziemlich unsauber, weil die Tabellen einfach eingefärbt werden, wenn man irgend wo auf der Seite klickt. Muss ich noch Mal drüber nachdenken.

Sempervivum

Wie ich sehe, das selbe Problem wie am Anfang. Verstehe ich nicht, zwischendurch hat es doch funktioniert.

Sempervivum

Gern geschehen, immer erfreulich, wenn am Schluss etwas funktioniert. Und ich habe etwas Neues über das window-Objekt gelernt.

Sempervivum

So, jetzt passt es. Man erkennt es nur im Debugger. Hätte doch in Zukunft vielleicht unerwünschte Nebeneffekte haben können.

Sempervivum

Das war auch noch falsch window muss klein geschrieben werden:

if (this != window) this.addEventListener('click', changeColors);

Sempervivum

Das komplette Einfärben der Zellen passiert jetzt auch, wenn man irgend wo auf der Seite klickt. Wahrscheinlich sieht man es gar nicht, weil ja genau so eingefärbt wird, wie es schon war, aber ist unsauber.

Sempervivum

Ja, wie ich vermutet hatte, jetzt werden die Tabellen auch gefärbt, wenn man irgend wo im Fenster klickt.

Versuche dies:

Code

    <script type="text/javascript">

        window.addEventListener('load', function () {
            changeColors();
            var nextButton = document.querySelectorAll('.dataTables_wrapper.no-footer .paginate_button.next');
            for (var j = 0; j < nextButton.length; j++) {
                nextButton[j].addEventListener('click', changeColors);
            }
        });
        function changeColors() {

            var tds = document.querySelectorAll('body.player-template-default.single.single-player table.dataTable.visualizer-data-table tbody > tr > td');

            for (var i = 0; i < tds.length; i++) {

                if (tds[i].innerText === 'W') tds[i].parentElement.style.backgroundColor = '#9ed7b6';

                else if (tds[i].innerText === 'L') tds[i].parentElement.style.backgroundColor = '#f4a6a6';

                else if (tds[i].innerText === 'D') tds[i].parentElement.style.backgroundColor = '#f4dda6';

                else if (tds[i].innerText === 'Total') {

                    tds[i].parentElement.style.fontWeight = 'bold';

                    tds[i].parentElement.style.backgroundColor = '#AFDBF1';

                }

            }

            // die folgende Anweisung deaktivieren:

            // nextButton = document.querySelector('.dataTables_wrapper.no-footer .paginate_button.next');

            // die folgende Anweisung hinzu fuegen:
            if (this != Window) this.addEventListener('click', changeColors);
        }
    </script>

Alles anzeigen

Sempervivum

Super, freut mich, dass das funktioniert! Da ist aber noch etwas unsauber, wahrscheinlich wird jetzt ein Eventlistener auch für das Window-Objekt registriert und das könnte unerwünschte Nebeneffekte haben. Moment, ich untersuche das ...

Sempervivum

Versuche dies (leider kann ich es nicht testen, weil mir die ganze Umgebung fehlt):

Code

<script type="text/javascript">

        window.addEventListener('load', function () {
            changeColors();
            var nextButton = document.querySelectorAll('.dataTables_wrapper.no-footer .paginate_button.next');
            for (var j = 0; j < nextButton.length; j++) {
                nextButton[j].addEventListener('click', changeColors);
            }
        });
        function changeColors() {

            var tds = document.querySelectorAll('body.player-template-default.single.single-player table.dataTable.visualizer-data-table tbody > tr > td');

            for (var i = 0; i < tds.length; i++) {

                if (tds[i].innerText === 'W') tds[i].parentElement.style.backgroundColor = '#9ed7b6';

                else if (tds[i].innerText === 'L') tds[i].parentElement.style.backgroundColor = '#f4a6a6';

                else if (tds[i].innerText === 'D') tds[i].parentElement.style.backgroundColor = '#f4dda6';

                else if (tds[i].innerText === 'Total') {

                    tds[i].parentElement.style.fontWeight = 'bold';

                    tds[i].parentElement.style.backgroundColor = '#AFDBF1';

                }

            }

            // die folgende Anweisung deaktivieren:

            // nextButton = document.querySelector('.dataTables_wrapper.no-footer .paginate_button.next');

            // die folgende Anweisung hinzu fuegen:
            this.addEventListener('click', changeColors);
        }
    </script>

Alles anzeigen

Sempervivum

OK, wenn das so funktioniert, müssen wir das jetzt auf alle Tabellen anwenden. Moment ...

Beiträge von Sempervivum

Timer speichern bei Neuladen

Timer speichern bei Neuladen

Timer speichern bei Neuladen

Timer speichern bei Neuladen

Timer speichern bei Neuladen

Timer speichern bei Neuladen

Code Erweiterung

Code Erweiterung

Code Erweiterung

Code Erweiterung

Code Erweiterung

Code Erweiterung

Code Erweiterung

Code Erweiterung

Code Erweiterung

Code Erweiterung

Code Erweiterung

Code Erweiterung

Code Erweiterung

Code Erweiterung