Style

Assistant

Startseite
Screenshot
Kurzanleitung
Download
Kurse & Infos
>Tipps & Tricks<
Unterstützer
TMXtensions
?Freeware!
About TM
E-Mail
Made with CSS
Valid HTML 4.01!
Stand: 07.12.2002

Tipps & Tricks – Tipp 36
Zur Übersicht

36. Zufallsfarben erzeugen oder wieviel DIVs schafft der Browser? ;-) (28.09.2000)

Das Script zu diesem Tipp entstand aus einem Unterrichtsbeispiel zum Thema Zufallsfarben. Zunächst ist die Ermittlung von Zufallsfarbwerten zu klären. Die random()-Methode des JavaScript-Math-Objektes ermöglicht die Ermittlung von Zufallszahlen im Bereich von 0 bis 1. Die erhaltenen Werte werden mit 255 multipliziert und auf ganze Zahlen gerundet. Die daraus resultieren Werte (0 bis 255) lassen sich direkt als RGB-Farbanteile weiter verarbeiten. Besonders günstig ist hier die Verwendung der CSS-Farbdefinition in der Form rgb(rotanteil,grünanteil,blauanteil): 

      zr=Math.round(Math.random()*255);
      zg=Math.round(Math.random()*255);
      zb=Math.round(Math.random()*255);
      farbe="Background-Color: rgb("+zr+","+zg+","+zb+");";
Die in den Beispielen verwendete Funktion FarbQuadrate(kantenlaenge) schreibt in das aktuelle Browserfenster die maximal mögliche (ganzzahlige) Anzahl von farbigen Quadraten in Abhängigkeit von der Kantenlänge der Quadrate und der aktuellen Fensterinnenmaße. Jedes Quadrat wird dynamisch als DIV mit CSS-Formatierungen erzeugt. 

      function FarbQuadrate(kantenlaenge)
      {
      var kantenlaenge, oben, links, farbe, zeile, zr, zg, zb, oben, links;
      var i, istart, j, jstart, fbreite, fhoehe, hanzahl, vanzahl;

      if (document.all)
      {
      fbreite=document.body.clientWidth;
      fhoehe=document.body.clientHeight;
      }

      if (document.getElementById && !document.all)
      {
      fbreite=window.innerWidth;
      fhoehe=window.innerHeight;
      }

      hanzahl=parseInt(fbreite/kantenlaenge);
      vanzahl=parseInt(fhoehe/kantenlaenge);
      istart=Math.round((fbreite-hanzahl*kantenlaenge)/2);
      jstart=Math.round((fhoehe-vanzahl*kantenlaenge)/2);

      for (j=0; j<vanzahl; j++)
      {
      oben=j*kantenlaenge+jstart;

        for (i=0; i<hanzahl; i++)
        {
        zr=Math.round(Math.random()*255);
        zg=Math.round(Math.random()*255);
        zb=Math.round(Math.random()*255);
        farbe="Background-Color: rgb("+zr+","+zg+","+zb+");";
        links=i*kantenlaenge+istart;
        hr=Number(zr).toString(16); if (hr.length<2) {hr="0"+hr};
        hg=Number(zg).toString(16); if (hg.length<2) {hg="0"+hg};
        hb=Number(zb).toString(16); if (hb.length<2) {hb="0"+hb};
        hexfarbe="#"+hr+hg+hb;
        hexfarbe="Color Picker: "+hexfarbe.toUpperCase();
        zeile="<DIV TITLE=\""+hexfarbe+"\" STYLE=\"Position: absolute;
         Width: "+kantenlaenge+"px; Height: "+kantenlaenge+"px;
         Top: "+oben+"px; Left: "+links+"px; "+farbe+"\">&nbsp;<\/DIV>";
        document.write(zeile);
        }

      }
      }


      Funktionsaufruf: FarbQuadrate(20)
In der vorliegenden Form läuft das Script passabel im IE 5.x und Netscape 6 (PR2) unter Windows. Erstaunlich ist, dass bei einer Bildschirmauflösung von 1024 x 768 Pixeln und 20px Kantenlänge immerhin 51 x 31 = 1581 DIVs problemlos verarbeitet und dargestellt werden. Bei kleineren Kantenlängen treten jedoch schnell Probleme bei der Scriptverarbeitung bzw. dem Rendering auf. Diese Effekte sind weitgehend unabhängig von der Prozessorleistung. Ein 700 MHz Pentium III- verhielt sich unter Windows 98 praktisch ebenso wie ein 200 MHz Pentium MMX-Rechner unter Windows 2000, jeweils mit IE 5.5 und 128 MB RAM.


Farbige Quadrate im IE 5.5, Kantenlänge=10px


In den Beispielen sind als Kantenlängen 50px (36a) bzw. 10px (36b) vorgegeben.