Beiträge von Sempervivum

Sempervivum

Was meinst Du denn mit "Namen", die Dateinamen?

Sempervivum

Da gibt es verschiedene Möglichkeiten:

1. Wenn das HTML und die Bilder, etc., nicht allzu umfangreich sind, kannst Du die Druckversion in der selben Datei unterbringen und die Sichtbarkeit für den Druck mit einer Mediaquery umschalten:

https://wiki.selfhtml.org/wiki/CSS/Media_Queries#Medientypen

2. Wenn Du gern eine getrennte Datei haben willst oder wenn diese wegen des Umfangs, siehe oben, angeraten ist, kannst Du die Druckversion mit Ajax, z. B. von einem Druck-Button gesteuert, mit Ajax einlesen.

Sempervivum

Das liegt daran, dass Du dem div.logo ein padding zugewiesen hast und gleichzeitig eine Breite von 100%. Diese 100% gelten dann für die Breite ohne Padding, d. h. mit Padding ergibt sich eine Breite von mehr als 100%.

Lösung, indem Du width: 100%; für div.logo löschst und body display: flex; und flex-direction: column; zuweist.

Edit: Wie ich sehe, braucht es gar kein display: flex; für body, denn div ist ja ein Blockelement und füllt von allein die verfügbare Breite aus.

Sempervivum

Wenn Du das alles so siehst, solltest Du aber auch deine Aktivitäten bei der Webentwicklung allein im stillen Kämmerlein betreiben und nicht anderen zumuten, sich durch einen Wust von inline-Styles zu kämpfen

Sempervivum

Etwas unkonventionell, das Ganze aber hat was

Zitat

Ja ich weiß, Tabellen sollten am Besten komplett vermieden werden, aber manchmal geht dies leider nicht.

Das ist ein Missverständnis, das man häufig antrifft. Es trifft zu, dass man vermeiden sollte, Tabellen für Layoutzwecke zu missbrauchen. Handelt es sich dagegen um die Darstellung von Daten, die von ihrer Struktur her tabellarisch sind, ist nichts dagegen einzuwenden.

Man sollte jedoch etwas anderes vermeiden: Float, sofern es nicht tatsächlich um das Umfließen eines Elementes geht. Dafür, die Anordnung von Elementen zu steuern, sind Flex- und Gridlayout entwickelt worden. Ich habe das CSS in deiner Mediaquery mal auf Flex umgestellt und siehe da, es wird so dargestellt, wie gewünscht.

Code

        @media screen and (max-width:700px) {

            table,
            tr,
            td {
                padding: 0;
                border: 1px solid black;
            }

            table {
                border: none;
            }

            thead {
                display: none;
            }

            tr {
                display: flex;
                flex-direction: column; /* Tabellenzellen jetzt untereinander darstellen */
                width: 100%;
                margin-bottom: 2em;
            }

            td {
                /* float: left; */
                display: flex; /* Elemente, :before und Zelleninhalt, nebeneinander darstellen */
                /* width: 100%; */ /* Die Breite wird jetzt durch das flex für tr festgelegt */
                padding: 1em;
            }

            td::before {
                content: attr(data-label);
                word-wrap: break-word;
                background: #eee;
                border-right: 2px solid black;
                width: 20%;
                /* float: left; */
                padding: 1em;
                font-weight: bold;
                margin: -1em 1em -1em -1em;
            }

            .spalte {
                /* float: left; */
                width: 60%;
            }
        }

Alles anzeigen

Sempervivum

Zitat

allerdings würde ich den Zeitstempel, bis wann der Timer laufen soll ... darin speichern.

Genau das tut das vorhandene Skript, siehe ab Zeile 33 in Posting #6:

Code

                var target_date = Date.now() + time_limit; // set the countdown date
                // Endezeit in den Localstorage eintragen
                localStorage.setItem('target_date', target_date);

bzw. ab Zeile 85 in der optimierten Version in Posting #23.

Sempervivum

Zitat

Aber ich bin gern für vorschläge offen Man kann ja nur dazu lernen

Wenn das so ist: Ich habe das Ganze etwas überarbeitet, so dass man eine Funktion für beliebig viele Timer verwenden kann. Die Statusvariablen onload und isChecked wegrationalisiert. Ich finde es so wesentlich übersichtlicher.

Code

    <div id="timer1">
        <div class="toggle text">
            <label style="left: -1.5em;"> Unter
                <input type="checkbox" class="unter" value="90"> <span class="slider"></span>
            </label>
        </div>
        <br>
        <div class="countdown">
            <div class="tiles color-full"></div>
        </div>
    </div>
    <div id="timer2">
        <div class="toggle text">
            <label style="left: -1.5em;"> Unter
                <input type="checkbox" class="unter" value="180"> <span class="slider"></span>
            </label>
        </div>
        <br>
        <div class="countdown">
            <div class="tiles color-full"></div>
        </div>
    </div>
    <!-- Beliebig viele weitere HTML-Bloecke fuer Timer anlegen -->
    <script>
        function Timer(id) {
            // Timervariable fuer das setInterval
            var thetimer;
            var container = document.getElementById(id);
            var thecb = container.querySelector('.unter');
            thecb.addEventListener('click', timerUnter);
            var thetiles = container.querySelector('.tiles');
            var target_date = localStorage.getItem('target_date-' + id);
            var time_limit;
            if (target_date) {
                // Endezeit vorhanden: Zeitdifferenz berechnen
                time_limit = target_date - Date.now();
                // Timer starten
                setTimeout(
                    function () {
                        //alert( 'done' );
                    }, time_limit);
                doCountdown();
                // Timer starten
                thetimer = setInterval(doCountdown, 1000);

                thecb.checked = true;
            }
            function doCountdown() {
                var days, hours, minutes, seconds; // variables for time units
                var countdown = thetiles; // get tag element
                // find the amount of "seconds" between now and target
                var seconds_left = (target_date - Date.now()) / 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;
            }
            function timerUnter(event) {
                if (this.checked) {
                    var minutes = this.value;
                    var time_limit = minutes * 60 * 1000;
                    target_date = Date.now() + time_limit; // set the countdown date
                    // Laufzeit in den Localstorage eintragen
                    localStorage.setItem('target_date-' + id, target_date);
                    //set actual timer
                    setTimeout(
                        function () {
                            //alert( 'done' );
                        }, time_limit);
                    doCountdown();
                    // Timer starten
                    thetimer = setInterval(doCountdown, 1000);
                } else {
                    thetiles.classList.remove("color-empty");
                    thetiles.classList.add("color-full");
                    thetiles.innerHTML = '';
                    clearInterval(thetimer); // Timer löschen
                    localStorage.removeItem('target_date-' + id);
                }
            }
        }
        var thetimer1 = new Timer('timer1');
        var thetimer2 = new Timer('timer2');
        // Beliebig viele weitere Objekte anlegen
    </script>

Alles anzeigen

Sempervivum

Das wird alles hier erklärt:

https://wiki.selfhtml.org/wiki/HTML/Web_Components/template

Demnach wird ein Template zwar geparst und auf Richtigkeit geprüft aber nicht gerendert und nicht in das DOM eingehängt.

Sempervivum

Zitat

Irgendwie widersteht es mir schon Degin und Script zu vermengen. Insbesondere, da CSS ja eigentlich unter anderem daraus entstanden ist, um Inhalt und Design-Angaben zu trennen.

Das hat natürlich immer noch seine Berechtigung. Man müsste aber auch die Begründung dieser Forderung berücksichtigen: Wenn ich es richtig verstehe, soll dadurch lesbarer, übersichtlicher und leicht zu ändernder Code entstehen.

Wenn auf der anderen Seite aber eine Situation entsteht:

Zitat

Und irgendwie habe ich es auch bisher immer mit irgendwelchen Tricks geschafft, zumindest das Layout ohne JS aufzubauen und auch - zumindest im Frontend - weitestgehend auf JS zu verzichten...

kann durch Trickserei dieses Ziel in das Gegenteil verkehrt werden und ich würde eine Lösung bevorzugen, mit einem Skript eine geradlinige Berechnung durchzuführen.

Bestes Beispiel sind Slideshows rein mit CSS: Machbar und eine interessante Herausforderung, aber eine Qual, wenn es um die Erweiterung geht.

Oder man denke an die Aufgabe, eine Reihe von Containern unabhängig vom Inhalt auf gleiche Höhe einzustellen. Bevor es Flexlayout gab, nur mit Javascript zu lösen (oder gab es doch irgend welche Tricks mit CSS?).

Sempervivum

Zitat

Ja ich habe das ganze jetzt 5x hintereinander

Ich nehme an, das bedeutet, dass Du auch die Funktion TimerUnter 5x hast und jedes Mal timerspezifisch angepasst hast? Wenn Du es so hast und keine Erweiterungen zu erwarten sind, ist es ja gut, aber es wäre kein Problem gewesen, diese Funktion so ändern, dass eine einzige beliebig viele Timer verwalten kann.

Sempervivum

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.

Sempervivum

Ich habe mit deinem Code eine Testdatei gemacht und denke, ich verstehe, was dein Ziel ist: Du möchtest die Divs von der Breite her so einrichten, dass keines abgeschnitten ist, auch wenn wegen des Scrollings rechts ein Teilbereich unsichtbar ist.

Wenn es meine Aufgabe wäre, hätte ich nicht solche Berührungsängste, Parameter mit Javascript zu berechnen. CSS ist nun mal nicht dafür gedacht, zu rechnen, wenn man mal von solch einfachen Dingen wie calc absieht, sondern sieht bestimmte Verfahren bzw. Layoutmuster vor, die mit Flex- oder Gridlayout definiert werden und wo der Browser dann die passenden Abmessungen berechnet.

Einfach die passende Breite der Divs ausrechnen und setzen.

Sempervivum

Gern geschehen!

Zitat

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

Dann hatte ich bei der Beschreibung wohl etwas vergessen.

Sempervivum

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?

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

Beiträge von Sempervivum

Eine id hinzufügen, wie?

Druckversion Website

Div's nehmen nicht die gewünschte Größe an

Element zoomen auf Bildschirm Höhe/Breite ohne Verzerren für alle BildschirmTypen.

responsive Tabellen per CSS

Timer speichern bei Neuladen

Timer speichern bei Neuladen

Warum sollte ich eine HTML5-Vorlage verwenden?

Alternative zu CSS min()

Timer speichern bei Neuladen

Timer speichern bei Neuladen

Alternative zu CSS min()

Timer speichern bei Neuladen

Timer speichern bei Neuladen

Timer speichern bei Neuladen

Timer speichern bei Neuladen

Timer speichern bei Neuladen

Timer speichern bei Neuladen

Timer speichern bei Neuladen

Timer speichern bei Neuladen