kostenloser Webspace werbefrei: lima-city

Hintergrund Farbe verändern

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   n****x

   15:42, 29.7.2009

   Hallo,
   ich bin ein ziehmlicher neuling in Javascript, habe aber bereits ein script selber geschrieben hier die Seite: http://nostox.lima-city.de/unzip_Background-Color/Background-Color/index.html
   
   Hier ist der Script:
   
   

   function hintergrundfarbe(){
   var X = new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");
   var x1=Math.floor(Math.random()*16), x2=Math.floor(Math.random()*16), x3=Math.floor(Math.random()*16), x4=Math.floor(Math.random()*16), x5=Math.floor(Math.random()*16), x6=Math.floor(Math.random()*16);
   document.bgColor = X[x1] + X[x2] + X[x3] + X[x4] + X[x5] + X[x6];
   document.form1.farbe.value=document.bgColor;
   if(x1+x3+x5<="24") {
   document.body.style.color="#FFFFFF";
   }
   else {
   document.body.style.color="#000000";
   }
   var y1=((x1+8) %16), y2=((x2+8) %16), y3=((x3+8) %16), y4=((x4+8) %16), y5=((x5+8) %16), y6=((x6+8) %16);
   document.getElementById("navi").style.backgroundColor = X[y1] + X[y2] + X[y3] + X[y4] + X[y5] + X[y6];
   document.getElementById("navi").style.color=document.bgColor;
   document.form2.navifarbe.value=document.getElementById("navi").style.backgroundColor;
   }

   
   
   Kurze erklärung: durch drücken auf den Button wird der hintergrund des dokumentes zufällig verändert gleichzeitig wird die Schriftfarbe auf weiss oder schwarz gestellt (kommt drauf an ob der hintergrund dunkel oder hell ist) Gleichzeitig wird der Farbcode in einem input feld ausgegeben. Am schluss wird eine weitere farbe erstellt welche den navigationsbereich in eine andere Farbe färbt. Auch diese Farbe wird in einem anderen input feld ausgegeben.
   
   Nun zu meiner Frage: Warum wird die Farbe in der Navigation in RGB ausgegeben und die Farbe des bodys in hexadezimalen? Ich kann mich eigentlich nicht erinnern das ich das irgendwo umgestellt habe?

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. adrians

   

   adrians hat kostenlosen Webspace.

   16:21, 29.7.2009

   Man sehe den Utnerschied zwischen Java und JavaSCRIPT..
   Da ist ein kleiner, großer Unterschied.
   
   
   
   Verschiebung ist angefragt.
   
   Edit (djfun): Verschoben von Java nach HTML&JavaScript
   
   Beitrag zuletzt geändert: 29.7.2009 16:45:54 von djfun

4. simuliertes

   

   simuliertes hat kostenlosen Webspace.

   1:23, 30.7.2009

   nostox schrieb:
   Nun zu meiner Frage: Warum wird die Farbe in der Navigation in RGB ausgegeben und die Farbe des bodys in hexadezimalen? Ich kann mich eigentlich nicht erinnern das ich das irgendwo umgestellt habe?
   

   
   
   bgColor ist HTML
   background-Color ist CSS
   
   Habe ein bischen gegoogelt und die Antwort in diesem Forum hier gefunden:
   http://www.webdeveloper.com/forum/showthread.php?t=186841
   

   
   Certainly in Firefox 3, no matter how you define the background color, it's returned as RGB.
   

   
   Ich schätze also Dir bleibt nichts anderes übrig als für ff ein work-around zu basteln.
   Ich würde es etwa so machen:
   1) erkennen ob die Farbe in Hex oder in rgb wiedergegeben wird.
   2) falls es rgb ist , in Hex umwandeln
   Übrigens:
   

   bgcolor is deprecated. You should be using the background-color in the CSS.

   
   
   Hier noch ein bisschen Code, Links & Zitate die Dir vielleicht bei der Lösung des Problems helfen könnten:
   

   function RGBtoHex(R,G,B) {return toHex(R)+toHex(G)+toHex(B)}
   function toHex(N) {
    if (N==null) return "00";
    N=parseInt(N); if (N==0 || isNaN(N)) return "00";
    N=Math.max(0,N); N=Math.min(N,255); N=Math.round(N);
    return "0123456789ABCDEF".charAt((N-N%16)/16)
         + "0123456789ABCDEF".charAt(N%16);
   }

   
   http://de.selfhtml.org/javascript/objekte/string.htm#match
   

   match()
   Durchsucht eine Zeichenkette mit Hilfe eines regulären Ausdrucks. Liefert Zeichenfolgen, auf die der reguläre Ausdruck passt, zurück. Erwartet als Parameter den regulären Ausdruck.
   

   
   http://de.selfhtml.org/css/formate/wertzuweisung.htm#farben
   

   
   Eine weitere Möglichkeit, Farben zu definieren, stellt die Stylesheet-Sprache CSS jedoch auch noch zur Verfügung. Das Schema dazu lautet rgb(rrr,ggg,bbb). Der Ausdruck rgb(...) ist dabei immer gleich. Innerhalb der Klammern müssen drei Dezimalwerte oder drei Prozentwerte stehen, durch Kommata voneinander getrennt. Für alle drei Werte sind entweder absolute Zahlen zwischen 0 (kein Anteil der entsprechenden Farbe) und 255 (maximaler Anteil der entsprechenden Farbe) oder Prozentwerte von 0% (kein Anteil an der entsprechenden Farbe) bis 100% (maximaler Anteil der entsprechenden Farbe) erlaubt.
   

   
   
   EDIT:
   Ich habe die Lösung:
   

   // JavaScript Document
   
   <!-- This is my first Javascript. This Script changes the background color randomly and if the backround is to dark the font changes as well
   
   function hintergrundfarbe(){
   var X = new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");
   var x1=Math.floor(Math.random()*16), x2=Math.floor(Math.random()*16), x3=Math.floor(Math.random()*16), x4=Math.floor(Math.random()*16), x5=Math.floor(Math.random()*16), x6=Math.floor(Math.random()*16);
   document.bgColor = X[x1] + X[x2] + X[x3] + X[x4] + X[x5] + X[x6];
   document.form1.farbe.value=document.bgColor;
   if(x1+x3+x5<="24") {
   document.body.style.color="#FFFFFF";
   }
   else {
   document.body.style.color="#000000";
   }
   <!-- when there is a navigation bar the bar changes too. //-->
   var y1=((x1+8) %16), y2=((x2+8) %16), y3=((x3+8) %16), y4=((x4+8) %16), y5=((x5+8) %16), y6=((x6+8) %16);
   document.getElementById("navi").style.backgroundColor = X[y1] + X[y2] + X[y3] + X[y4] + X[y5] + X[y6];
   document.getElementById("navi").style.color=document.bgColor;
   var tmpCol = document.getElementById("navi").style['backgroundColor'].replace(/rgb\((\d+)\,\s(\d+)\,\s(\d+)\)/g, function (a, b, c, d) {return "#" + toHex(parseInt(b)) + toHex(parseInt(c)) + toHex(parseInt(d));});
   document.form2.navifarbe.value=tmpCol;
   <!-- second color output is sometimes in rgb , in this case make it Hex...//-->
   
   }
   function toHex(N) {
    if (N==null) return "00";
    N=parseInt(N); if (N==0 || isNaN(N)) return "00";
    N=Math.max(0,N); N=Math.min(N,255); N=Math.round(N);
    return "0123456789ABCDEF".charAt((N-N%16)/16)
         + "0123456789ABCDEF".charAt(N%16);
   }
   //-->

   
   
   Beitrag zuletzt geändert: 30.7.2009 1:38:39 von simuliertes
5. Autor dieses Themas

   n****x

   11:30, 30.7.2009

   Danke für deine detaillierte Antwort,
   dank dir bin ich auch draufgekommen, welchen fehler ich gemacht habe: ich hab den hintergrund des bodys in html verändert und bei der navigation in css. So könnte man mittels document.body.style.backgroundcolor ganz einfach den hintergrund auch in css verändern. So wären beide in rgb geschrieben.
   
   Nochmals danke für deine Lösung, somit weis ich nun auch wie man rgbs zu hex Konvertiert.

6. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?