Beiträge von Sempervivum

Sempervivum

Zitat

kannstdu mirmaleinbeispiel geben ,wie man das obrige machen kann???

nicht genau das obige, aber schau dir mal dies an und probiere es aus:

Code

<style>
        body {
            margin: 0;
            padding: 0;
        }

        #lauflichtcontainer {
            width: 200vw;
            position: relative;
            top: 0;
            left: 0;
            animation: lauflicht 5s linear infinite;
            display: flex;
            flex-direction: row;
        }

        @keyframes lauflicht {
            from {
                left: 0;
            }
            to {
                left: -100vw;
            }
        }

        #lauflichtcontainer div:nth-child(odd) {
            background-color: turquoise;
        } 
        #lauflichtcontainer div:nth-child(even) {
            background-color: blue;
        } 
    </style>
    <div id="lauflichtcontainer"></div>
    <script>
        var divider = 40;
        var winwidth = document.documentElement.clientWidth;
        var nr = Math.ceil(winwidth / divider) * 4;
        var width = height = winwidth / nr * 2;
        for (var i = 0; i < nr; i++) {
            var box = document.createElement("div");
            box.style.width = width + "px";
            box.style.height = height + "px";
            lauflichtcontainer.appendChild(box);
        }
    </script>

Alles anzeigen

Sempervivum

Du hast nicht wirklich einen Fehler gemacht, aber das Javascript macht dir einen Strich durch die Rechnung, denn es nummeriert hiermit die Tage neu:

Code

        for (var i = 0; i < images.length; i++) {
            images[i].setAttribute("data-day", i + 1); // Nummer des Tages als data-Attribut hinzu fuegen
            images[i].src = "http://lorempixel.com/output/nature-q-c-160-160-5.jpg"; // nur zum Test
        }

Wenn Du das löschst, bleiben deine Einträge erhalten.

Sempervivum

Zeile 7 erzeugt ein Eingabefeld, wo Du den Wert eingeben kannst:

Code

<input id="val" />

Und ab Zeile 9 wird diesem ein Eventlistener zugewiesen, durch Aufruf der Funktion updateCircleDisplay() die Anzeige auf den Wert setzt, der im Eingabefeld eingegeben wurde.

Sempervivum

Das ist kein Pfusch und Du kannst es ruhig so machen, wenn Du nicht gerade mehrere Tausend divs anlegen willst.

Besser, weil performanter bzw. schneller, ist, die Elemente nicht mit innerHTML sondern mit document.createElement anzulegen. Hast Du dir dies durch gelesen?

https://www.html-seminar.de/javascript-dom-eingreifen.htm

Sempervivum

Da wird dir jeder etwas anderes empfehlen. IMO ist das Wichtigste, dass der Editor nicht nur ein Syntax-Highlighting hat sondern auch Syntaxfehler gleich beim Editieren anzeigt. Das erleichtert und beschleunigt die Entwicklung enorm.

Selber benutze ich Visual Studio 2015 Community. Die Community Edition ist kostenlos bei nicht kommerzieller Nutzung.

Sempervivum

Du kannst nur eine Variable zurück geben. Diese kann jedoch ein Array oder Objekt sein, dann kannst Du mehrere Werte hinein legen:

Code

function los(){
    var a = 'hallo';
    var b = 'du'
    var c = 'da'
    return {va: a, vb: b, vc: c}; // so geht das 
}
var retval = los();
console.log(retval.va);
console.log(retval.vb);
console.log(retval.vc);

Sempervivum

Wenn Du so etwas effizient kodieren willst, musst Du die Elemente durch Javascript erzeugen und bei der Erzeugung und Bearbeitung Schleifen verwenden.

https://www.html-seminar.de/javascript-dom-eingreifen.htm

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

Und den Effekt, dass sich die Farben abwechseln, kannst Du sehr effizient mit Pseudoklassen realisieren:

https://wiki.selfhtml.org/wiki/CSS/Einst…n#Pseudoklassen

Sempervivum

OK, ich habe es mal versucht. Wenn Du den Code wirklich verstehen willst, empfehle ich, das jQuery-Tutorial hier bei html-siminar durchzuarbeiten.

HTML

<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jcanvas/20.1.2/jcanvas.js"></script>
</head>
<body>
    <canvas id="display" class="circlecountdown"
            width="220" height="220"></canvas>
    <input id="val" />
    <script>
        // hier wird ein Eventlistener für das input-Feld
        // mit der ID "val" (Zeile 12) registriert
        // staende dieses Skript im Head, wäre dieses input-Feld noch nicht definiert
        $("#val").on("change", function () {
            updateCircleDisplay("#display", this.value);
        });

        function updateCircleDisplay(selector, value) {
            $(selector).each(function (idx, ele) {
                var canv = $(this);
                var max = canv.data("max");
                var deg = value / max * 360;
                canv.setLayer('text', {
                    text: canv.data("templateText").replace("{value}", value)
                }).stopLayer('circle')
                .animateLayer('circle', {
                    end: deg
                }, {
                    duration: 1000,
                    easing: 'linear',
                });
            });
        }
        function createCircleDisplay(selector, value, max, options) {
            var opts = {
                radius: 100,
                colorCircle: "blue",
                strokeWidthCircle: 20,
                colorBgCircle: "lightgrey",
                strokeWidthBgCircle: 20,
                colorText: "orange",
                templateText: "{value} $"
            }
            $.extend(opts, options);

            // hier wird auf das Canvas-Element mit der ID "display" (Zeile 10) zugegriffen
            // siehe Aufruf der Funktion in Zeile 94
            // staende diese Skript im Head, waere dieses Element noch nicht definiert
            $(selector).each(function (idx, ele) {
                var canv = $(this);
                canv.data("max", max);
                canv.data("templateText", opts.templateText);
                var deg = value / max * 360;
                var size = 2 * opts.radius + opts.strokeWidthCircle;
                var pos = opts.radius + opts.strokeWidthCircle / 2;
                canv.attr("width", size);
                canv.attr("height", size);
                canv.drawArc({
                    layer: true,
                    name: 'circle2',
                    strokeStyle: opts.colorBgCircle,
                    strokeWidth: opts.strokeWidthBgCircle,
                    x: pos, y: pos,
                    radius: opts.radius,
                    // start and end angles in degrees
                    start: 0, end: 360
                });
                canv.drawArc({
                    layer: true,
                    name: 'circle',
                    strokeStyle: opts.colorCircle,
                    strokeWidth: opts.strokeWidthCircle,
                    rounded: true,
                    x: pos, y: pos,
                    radius: opts.radius,
                    // start and end angles in degrees
                    start: 0, end: deg
                });
                canv.drawText({
                    layer: true,
                    name: 'text',
                    fillStyle: opts.colorText,
                    strokeWidth: 4,
                    x: pos, y: pos,
                    fontSize: 40,
                    fontFamily: 'Arial',
                    text: opts.templateText.replace("{value}", value)
                });
            });
        }
        createCircleDisplay('#display', 30, 100);

    </script>

</body>
</html>

Alles anzeigen

Sempervivum

Gern. Der Browser arbeitet die Datei von oben nach unten ab. Das Javascript greift hier:

Code

$("#val").on("change", function () {

auf das Input mit der ID "val"

und hier:

Code

$(selector).each(function (idx, ele) {

auf das Canvas mit der ID "display" zu. Steht das Javascript im Head, hat der Browser die Zeilen wo diese Elemente definiert werden, noch nicht abgearbeitet und sie sind deshalb undefiniert.

Es kommt zu keiner Fehlermeldung, weil z. B. $("#val") dann ein leeres Array liefert.

Sempervivum

Dann vermute ich folgendes: Da ich im body kein Skript sehe, nehme ich an, dass Du das Javascript in den head eingetragen hast. Dann gibt es das Problem, dass dort die Elemente Canvas und Input noch nicht existieren. Lege das Javascript an das Ende des Body, vor das schließende </body>.

Sempervivum

Zitat

das es bei jQuery so sein muss, das man immer online sein muss.

Auf keinen Fall, das trifft nur zu, wenn Du es von einem CDN lädst.

Sempervivum

Zitat

Warum kann er das denn nicht laden ?

Du hast doch geschrieben, dass Du es offline verwenden willst. Wenn Du noch das Laden von den CDNs drin hast, kann es dann nicht funktionieren.

Wenn es daran nicht liegt, dann poste noch Mal, wie Du jQuery und jCanvas eingebunden hast und was die Console anzeigt.

Sempervivum

Er kann jQuery und jCanvas nicht laden.

Wie man jQuery einbindet, kannst du hier nachlesen:

https://www.html-seminar.de/jquery-tutorial.htm

jCanvas kannst Du hier herunter laden:

https://projects.calebevans.me/jcanvas/

Sempervivum

Zitat

Was und wie muss ich dieses jQuery runterladen und einbinden ?

und dann JCanvas runterladen?

Für den Anfang brauchst Du es nicht herunterzuladen, sondern Du kannst beide von einem CDN einbinden:

Code

    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jcanvas/20.1.2/jcanvas.js"></script>

Inzwischen habe ich es geändert, so dass es mehr auf deine Anwendung passt:

https://jsfiddle.net/Sempervivum/1somodv3/1/

Mit createCircleDisplay() wird die Anzeige aufgebaut, dies brauchst Du nur einmal beim Laden der Seite aufzurufen.

Mit updateCircleDisplay() wird der angezeigte Wert geändert.

Das Eingabefeld ist nur zur Demonstration, das kannst Du später weg lassen.

Sempervivum

Deine Auswahl der Schwierigkeit ist doch das beste Beispiel. Es kann nur einen Level geben und was Du mühevoll bei den Checkbuttons mit Javascript programmiert hast, macht eine Gruppe von Radiobuttons von allein. Wenn eine Mehrfachauswahl gefragt ist, kann man Checkbuttons verwenden.

Sempervivum

Ich habe vor einiger Zeit mal etwas ähnliches mit jCanvas gemacht. Einen Circle-Countdown, aber das kann man leicht umstellen, um Daten anzuzeigen.

https://jsfiddle.net/Sempervivum/o4qbLzow/

Sempervivum

Das data-Attribut legt fest, zu welchen Tag das Bild gehört, also bei data-day="14" würde das Bild zum 14. Dezember gehören. Wenn ich diese Zahl jetzt dem ersten Bild zuordne, passt es doch nicht, denn das Bild "/Adventskalender/img/fst_px/px01_1.gif" gehört doch zum 1. Dezember oder nicht? Oder ist das egal? Ich weiß ja nicht, wie die Bilder aussehen.

Sempervivum

Danke, so etwas liest man gern!

Sempervivum

Zitat

Also sagt man dann damit, dass das Erwartete eine Zahl die 5 Nummern lang sein muss ist. ^ und $ vor und hinter den vorgaben sagen dann aus, dass nach den 5 Nummern schluss ist.

Genau. Oder anders gesagt, die Regex passt, wenn zwischen Anfang und Ende genau fünf Ziffern stehen.

Sempervivum

Zitat

Der Lösungsweg mit dem .match("muster") ist doch nicht so gut.

Das möchte ich entschieden bezweifeln. Das Problem ist, dass die Regex passt, wenn irgendwo fünf Ziffern hintereinander stehen. Das ist dann auch der Fall, wenn die Eingabe sechs, sieben oder hundert Ziffern enthält.

Die Regex kann man sehr leicht anpassen, so dass nicht weniger und nicht mehr als fünf Zeichen vorhanden sein dürfen:

Code

if (plzval.match(/^[0-9]{5}$/))

Funktioniert bei mir, probiere es aus.

Beiträge von Sempervivum

Kleines Spiel Script "Javascript"

Adventskalender

Java Script Bibliotheken

Kleines Spiel Script "Javascript"

Kleines Spiel Script "Javascript"

Kleines Spiel Script "Javascript"

Kleines Spiel Script "Javascript"

Java Script Bibliotheken

Java Script Bibliotheken

Java Script Bibliotheken

Java Script Bibliotheken

Java Script Bibliotheken

Java Script Bibliotheken

Java Script Bibliotheken

Kleines Spiel Script "Javascript"

Java Script Bibliotheken

Adventskalender

Json mit javascipt bearbeiten

Json mit javascipt bearbeiten

Json mit javascipt bearbeiten