allgemeine fragen zu Javascript

  • Sempervivum ich habe mal ne frage

    ich habe kleines userscript gemacht was mir aus spass die seiten aufrufe zählen soll die man so um tag macht ... dazu soll ein kleiner kasten oben links in ecke stehen wo die zahl drinne ist .. siehe code

    auf den meisten seiten geht es ja ,aber auf anderen seiten ist der div irgendwo auf der seite oder die zahl ist nicht in den div... wiekann sowas sein weil habe doch alles fest vergeben..ich sehe da kein feher weil es zu 60 % aller seiten ja geht

  • oh man.da kann man mal sehen das man auf so eine lösung nicht selber kommt.vielen dank hätte mich wohl noch dumm gesucht.

    was bedeutet das absolute den genau ,weil die position angaben stehen doch drinne,warum verschiebt sich das den auf einigen seiten so doll und auf anderen seiten ist alles ok

  • Draga_90: Du hättest für den Adventskalender besser einen neuen Thread auf gemacht, so geht es hier ein wenig durcheinander.

    HTML:

    Code
    <div class="door"><span class="contentclose">17</span><span class="contentopen">Offen 17</span></div>

    CSS:

    Jetzt musst Du nur noch verhindern, dass ein Türchen zu früh geöffnet wird. Sie dir dazu mal dies an:
    Adventskalender

    Hallo Sempervivum ich bedanke mich für die Hinweise :)

    Ich habe threads geändert.


    als nächste hast du an diesen Code gemeint:


    <table id="Tabelle_01" width="620" height="1020" border="0" cellpadding="0" cellspacing="0">

    <tr>

    <td>

    <img src="/Adventskalender/img/fst_px/px01_01.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_01.gif')"></a>

    </td>

    <td>

    <img src="/Adventskalender/img/fst_px/px01_02.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_02.gif')"></a>

    </td>

    <td>

    <img src="/Adventskalender/img/fst_px/px01_03.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_03.gif')"></a>

    </td>

    <td>

    <img src="/Adventskalender/img/fst_px/px01_04.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_04.gif')"></a>

    </td>

    </tr>

    <tr>

    <td>

    <img src="/Adventskalender/img/fst_px/px01_05.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_05.gif')"></a>

    </td>

    <td>

    <img src="/Adventskalender/img/fst_px/px01_06.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_06.gif')"></a>

    </td>

    <td>

    <img src="/Adventskalender/img/fst_px/px01_07.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_07.gif')"></a>

    </td>

    <td>

    <img src="/Adventskalender/img/fst_px/px01_08.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_08.gif')"></a>

    </td>

    </tr>

    <tr>

    <td>

    <img src="/Adventskalender/img/fst_px/px01_09.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_09.gif')"></a>

    </td>

    <td>

    <img src="/Adventskalender/img/fst_px/px01_10.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_10.gif')"></a>

    </td>

    <td>

    <img src="/Adventskalender/img/fst_px/px01_11.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_11.gif')"></a>

    </td>

    <td>

    <img src="/Adventskalender/img/fst_px/px01_12.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_12.gif')"></a>

    </td>

    </tr>

    <tr>

    <td>

    <img src="/Adventskalender/img/fst_px/px01_13.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_13.gif')"></a>

    </td>

    <td>

    <img src="/Adventskalender/img/fst_px/px01_14.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_14.gif')"></a>

    </td>

    <td>

    <img src="/Adventskalender/img/fst_px/px01_15.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_15.gif')"></a>

    </td>

    <td>

    <img src="/Adventskalender/img/fst_px/px01_16.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_16.gif')"></a>

    </td>

    </tr>

    <tr>

    <td>

    <img src="/Adventskalender/img/fst_px/px01_17.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_17.gif')"></a>

    </td>

    <td>

    <img src="/Adventskalender/img/fst_px/px01_18.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_18.gif')"></a>

    </td>

    <td>

    <img src="/Adventskalender/img/fst_px/px01_19.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_19.gif')"></a>

    </td>

    <td>

    <img src="/Adventskalender/img/fst_px/px01_20.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_20.gif')"></a>

    </td>

    </tr>

    <tr>

    <td>

    <img src="/Adventskalender/img/fst_px/px01_21.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_21.gif')"></a>

    </td>

    <td>

    <img src="/Adventskalender/img/fst_px/px01_22.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_22.gif')"></a>

    </td>

    <td>

    <img src="/Adventskalender/img/fst_px/px01_23.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_23.gif')"></a>

    </td>

    <td>

    <img src="/Adventskalender/img/fst_px/px01_24.gif" name="image" onclick="switchImage(this, '/Adventskalender/img/scd_px/px02_24.gif')"></a>

    </td>

    </tr>

    </table>

    <script>

    // Schleife ueber alle Bilder

    var images = document.querySelectorAll("#Tabelle_01 td img");

    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

    }

    function switchImage(img, imgSrc) {

    now = new Date();

    day = now.getDate();

    month = now.getMonth() + 1;

    day = 3; // nur zum Test

    month = 12; // nur zum Test

    if (month == 12 && day >= img.getAttribute("data-day")) {

    console.log("ok");

    if (imgSrc != "none") {

    img.src = imgSrc;

    }

    }

    }

    </script>

  • Zitat

    was bedeutet das absolute den genau ,weil die position angaben stehen doch drinne

    Die Positionsangaben sind nur wirksam, wenn man das Element mit position:absolute oder position:relative positioniert.

    Zitat

    warum verschiebt sich das den auf einigen seiten so doll und auf anderen seiten ist alles ok

    Dieses:

    Code
    document.getElementsByTagName('body')[0].appendChild(zahler);

    fügt das Dokument am Ende der Inhalte an, die gerade, wenn das Userscript abläuft, im Body vorhanden sind. Es kann sein, dass Elemente nachträglich, z. B. durch Ajax, hinzu gefügt werden, so dass das Element dann mitten drin steht.

  • Hallo Draga_90: Ja, das habe ich gemeint. Für die Prüfung ist dieses Javascript relevant:

    Code
    now = new Date();
    day = now.getDate();
    month = now.getMonth() + 1;
    day = 3; // nur zum Test
    month = 12; // nur zum Test
    if (month == 12 && day >= img.getAttribute("data-day")) {
        console.log("ok");
        if (imgSrc != "none") {
        img.src = imgSrc;
    }

    Wenn Du nicht weißt, wie Du es bei dir einbauen kannst, dann melde dich noch Mal.

  • Das Funktioniert.Vielen Dank:saint:


     

    aber farbe relativ zur antwort ändern verstehe ich nicht ,erklär mal bitte genauer ..


    man könnte die farben zur bestimmten uhrzeit ändern zb jede stunde nee andere farbe.

    oder wenn im alerts zum beispiel nee antwort NEIN steht oder ACHTUNG das er dann rot ist oder so ,das geht natürlich auchh

    Beides währe Nett:/

    z-index: 1000; ? Gibst es sowas eigentlich? Dachte das geht nur bis 99?

  • Hallo Sempervivum

    ich habe es versucht, aber leider nicht geschafft den Code einzubinden.

    Ich kann nicht verstehen, warum <table> und <tr> und <td> einbunden werden müssen?

    ich habe das zwar geübt aber bei der Erstellung eines normalen Kalendars.

    Dann möchte ich dich fragen, ob ich für jedes Türchen ein Bild im gif erstellen muss?

  • Hallo Draga, dieses Javascript sollte es tun:

  • @derneue2017 mit deinen farben bzw uhr bastel ich nachher mal was und was den z-index angeht weiss ich das leider auch nicht so genau.


    ich teste meine scripter immer auf einer bestimmten internetseite..beim herstellen des script habe ich solange mit z-index rum gespielt bis alles überdeckt wahr.

    der wert lag bei 800 irgendwas. deswegen habe ich z-index 1000 gemacht.. wie weit der wert in der regel ist bzw sein darf weiss ich auch nicht so genau ...habe schon gegoogelt und angebliche werte uber nee million gesehen womit die browser arbeiten sollen.. vieleicht weiss einer das genauer als ich

  • Aha,würde mich gerne mal Interesieren wie weit der Wert liegen darf.

    Zu den Script eine Bitte!

    Kann man da sowas wie ein Zufallsgenerator einbauen der jedesmal eine andere Farbe hat.

    Wie viele Farben gibt es 100 ?

    Wenn es da was gibt bitte ich euch rum das mit einzubauen,oder mir Hilfe zu geben wie man das umsetzen kann.


    Vielen Dank:thumbup:

  • jo das währr auch noch neee möglich keit


    https://jsfiddle.net/basti1012/bnefbkwu/3/ ( ist kleiner fehler drinne ,wird komischer weise nicht angenommen ,wes gar nicht warum weil p mit background müsste eigentlich rot sein geht aber nicht ,in diesen fall ok) einfach "backgroundColor="red"" löschen das gehöhrt da nicht hin ,sorry


    derneue2017 zur info es gibt 255*255*255 farben = 16581375


    das heist wenn du jede sekunde eine andere farbe haben willst hast du über 191 tage für jede sekunde nee andere farbe ..reicht dasss???????????



    habe noch ein zufall gefunden .aber nicht getestet

    Code
    function createRandomColors () {
      return [
        (Math.random() * 255).toFixed(0),
        (Math.random() * 255).toFixed(0),
        (Math.random() * 255).toFixed(0),
      
      ]
    }
  • Das ist CSS. Bei CSS gibt es bestimmte Regeln, wenn die selbe Eigenschaft mehrmals definiert wird. Die wichtigsten:

    • Die Reihenfolge, was zuletzt kommt, überschreibt alles davor.
    • Der Selektor, der spezifischer ist, setzt sich durch, z. B. div.theclass ist spezifischer als einfach div und die betr. Eigenschaften setzen sich durch.
    • !important veranlasst, dass sich die Eigenschaft durchsetzt.
    • Eigenschaften, die mit Javascript zugewiesen wurden, haben höchste Priorität.
  • Code
    !important

    Das ergibt sinn.Danke Sempervium.

    Basti1012 hast du mich vergessen?

    Aber eine frage an euch

    Wenn ich das richtig sehe gibt es da 360 verschiedene farben? Aber keine Schwarz und Weiss töne richtig?

    jo das währr auch noch neee möglich keit


    https://jsfiddle.net/basti1012/bnefbkwu/3/ 

     

    Und bei den Zufall gibt es 16.000.000 Farben die keiner brauch? Bei sovielen Farben sieht man doch gar kein unterschied mehr.

    Basti1012 bitte baue mir den Zufall von Semperivium ein weil da sieht man noch ein unterschied bei 360 Farben.Vermisse da nur die dunklen Töne wie Schwarz und Braun,oder ich habe was Falsch gemacht?

  • Zitat

    Vermisse da nur die dunklen Töne wie Schwarz und Braun,oder ich habe was Falsch gemacht?

    Nein, Du hast nichts falsch gemacht. HSL bedeutet hue (Farbton), saturation (Sättigung) und lightness (Helligkeit). Und wie Du siehst, habe ich nur den Farbton zufällig gemacht. Die Absicht war, möglichst leuchtende Farben (max. Sättigung) zu bekommen. Wenn Du auch die dunklen (braun, schwarz) und hellen (weiß) Farben bekommen willst, musst Du auch die Helligkeit zufällig machen:

    https://jsfiddle.net/Sempervivum/bnefbkwu/5/

  • Hallo Sempervivum danke für deine Hilfe!


    jetzt habe ich Problem mit den Bilder. Beim Klicken sind sie hinter doors :/

    Wie kann ich das ändern? In css? und welcher code brauche ich das Bild wieder zu schließen?


    Danke, danke,danke :)

  • Das Bild kannst Du mit diesem CSS in den Vordergrund bringen:

    Code
            .door.open {
                background-color: transparent;
                opacity: 1;
                position: relative;
                z-index: 999;
            }

    Für das Schließen gibt es mehrere Möglichkeiten:

    • In das Bild klicken
    • In einer Ecke des Bildes ein Kreuz-Symbol für das Schließen anbringen

    Was wäre dir lieber?

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!