allgemeine fragen zu Javascript

basti1012 · 22. November 2017

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

Code

var zahler = document.createElement("div");
  zahler.id = 'zahler';
  zahler.style.zIndex='250';

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



 GM_addStyle('#zahler{top:0px;left:0px;width:50px;height:50px;background:yellow;border:1px solid black;}');
 
  var a=GM_getValue("zahler",0);
    a++;
zahler.innerHTML ='<font style="color:blue ;font-size:150%;font-family:cursive; ">'+a+'</font>';
 GM_setValue("zahler",a)

Alles anzeigen

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

Sempervivum · 22. November 2017

Versuch mal #zaler absolut zu positionieren.

basti1012 · 22. November 2017

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 · 22. November 2017

Zitat von Sempervivum

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:

Code

span.contentclose {
            display: inline;
        }
        span.contentopen {
            display: none;
        }
        .door.open span.contentclose {
            display: none;
        }
        .door.open span.contentopen {
            display: inline;
            font-size: 0.8em;
        }
        .door.open {
            background-color: transparent;
        }

Alles anzeigen

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:

<tr>

<td>

</td>

<td>

</td>

<td>

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

<td>

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

<td>

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

<td>

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

<td>

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

<td>

</td>

<td>

</td>

</tr>

</table>

// 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>

Sempervivum · 22. November 2017

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.

Sempervivum · 22. November 2017

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.

derneue2017 · 22. November 2017

Das Funktioniert.Vielen Dank

Zitat von basti1012

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?

Draga_90 · 22. November 2017

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?

Sempervivum · 22. November 2017

Zitat

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

Damit liegst Du ganz richtig, denn eine Tabelle ist in diesem Fall eigentlich fehl am Platze. Bleibe bei deinem HTML.

Sempervivum · 22. November 2017

Hallo Draga, dieses Javascript sollte es tun:

Code

        var tuerchen = document.querySelectorAll(".door");
        for (var i = 0; i < tuerchen.length; i++) {
            tuerchen[i].addEventListener("click", function () {
                now = new Date();
                dayNow = now.getDate();
                month = now.getMonth() + 1;
                dayNow = 19; // nur zum Test
                month = 12; // nur zum Test
                var dayClicked = parseInt(this.children[0].innerHTML);
                if (month == 12 && dayClicked <= dayNow) {
                    this.classList.add("open");
                } else {
                    // Hinweis, dass es noch zu frueh fuer dieses Tuerchen ist
                }
            })
        }

Alles anzeigen

basti1012 · 22. November 2017

@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

derneue2017 · 23. November 2017

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

Sempervivum · 23. November 2017

Zufallsfarbe:

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

basti1012 · 23. November 2017

Zitat von Sempervivum

Zufallsfarbe:

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

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),
  
  ]
}

derneue2017 · 23. November 2017

Kann mir mal einer sagen was das ,

Code

!important

zu bedeuten hat?

Das sieht man öfters in Javascript.

Sempervivum · 23. November 2017

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.

derneue2017 · 24. November 2017

Code

!important

Das ergibt sinn.Danke Sempervium.

Basti1012 hast du mich vergessen?

Aber eine frage an euch

Zitat von Sempervivum

Zufallsfarbe:

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

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

Zitat von basti1012

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?

Sempervivum · 24. November 2017

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/

Draga_90 · 24. November 2017

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

Sempervivum · 24. November 2017

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?

allgemeine fragen zu Javascript

Jetzt mitmachen!

Teilen