ugrás a tartalomhoz

Szivárvány-java script

Anonymous · 2006. Nov. 25. (Szo), 21.02
Kaptam egy feladatot és sehogy sem boldogulok vele pedig már szinte "kifolyik" a szemem a monitortól ha valaki tuná please szánjon meg vele!!
a feladat :

Rajzolj JavaScript és a DOM segítségével egy szivárványt.
Egy olyan "szalagot", mely egyre növekvő sugarú, "vékonyabb",
félkörökből áll melyek szine a szivárvány szineinek megfelelően változik.
-A félkörök szinte (vagy akár teljesen) összeérő pontokból álljanak
-minél szebb (folyamatosabb) színátmenetre kell törekedni (20 vagy több
elemi félkör javasolt)

Nagyon nagyon hálás köszönetem annak aki tud segíteni!

Kata
‹ Floatolt div mellett szöveg Clear: left és padding ›
 ■
1

Furcsa

attlad · 2006. Nov. 25. (Szo), 22.35
Hát furcsa feladat, mivel ilyet pontokból (HTML elemekkel) nem igazán célszerű. Újabban a CANVAS elem való erre, amit az IE nem ismer.

Persze egy rakás DIV-vel ki lehet rakni bármit de.. Mint itt:
http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm

A leírásodból meg nem derül ki hogy melyik részét nem tudtad megoldani.. (a pont kirakást vagy hogy hova kerüljenek a pontok)
2

Szivárvány

Anonymous · 2006. Nov. 25. (Szo), 22.44
elég mazsola vagyok sajnos, úgy hogy szinte minden problémát okoz, még az elemi félkör rajzolása is hiába találtam hozzá mindenfélét mégsem működik :(
3

Nem erre való a js, de itt egy megoldás

Jano · 2006. Nov. 25. (Szo), 23.20
Aki feladta a feladatot nem nagyon lehet tisztában a JavaScript lehetőségeivel...De próbáljuk meg:

Először is érdemes HSV színrendszert használni a CSS-beli RGB helyett, mert itt a H komponens pont a szín, méghozzás elvileg pont szívárványszín sorrendben is van. A H vagyis hue értéket kell 0-360-ig növelni.
Találtam is egy átalakító scriptet:
Simple color effects

Úgy rajzolhatunk pontokat, ha létrehozunk pl DIV elemeket és ezeknek háttérszínét állítjuk. Jó ronda megoldás lesz, mert minél finomabb rajzolatot akarunk annál több DIV elemet kell létrehozni.

Pl így rajzolhatunk egy szívárványszínű csíkot:

function createColumn(height,pointHeight,width) {
  var col = document.createElement("div");
  col.style.width = width+'px';
  col.style.overflow = "hidden";
  var lepes = Math.floor(360/height);
  for (var i = 0; i < 360; i+=lepes) {
    var point = document.createElement("div");
    var h = ((i)%360)
    //alert(h)
    var color = new HSV(360-h,1,1);
    point.style.backgroundColor = color.toHex();
    point.style.height = pointHeight+'px';

    point.style.overflow = "hidden";
    col.appendChild(point);
  }
  document.body.appendChild(col);
  return col;
}

    var h = ((i)%360)
Itt a modulos osztás felesleges mert pont jó színnel kezdődik, de ha i-hez hozzáadnál valamilyen értéket akkor eltolthatod a kezdő színt.

    var color = new HSV(360-h,1,1);
A 360-h csak megfordítja a sorrendet.

Ezután ilyen oszlopokat kell egymás mellé félkör alakban kirakni mondjuk a sinus függvény segítségével.

function felkor(height,pointHeight,width,db) {
  var lepes = Math.floor(width/db);
  for (var i = 0; i < db; i++) {
    div = createColumn(height,pointHeight,lepes);
    div.style.position = "absolute";
    div.style.top = ((pointHeight*height+100)-100*Math.sin(Math.PI/db*i))+"px";
    div.style.left = (i*lepes)+"px";
  }
}

felkor(20,2,400,200);
4

Köszönöm köszönöm köszönöm!!!!

Anonymous · 2006. Nov. 26. (V), 09.38
Nagyon nagyon köszönöm a segítségedet, igazán rendes volt tőled! Életmentő volt!!!!