[TUTORIAL] Farb-Fader

[Aron]

Hallo Leute,

maulwurf und ich hatten gestern nix zu tun. Als
Beschäftigungstherapie haben wir einen kleinen
Farbfader geschrieben.

<script language=&quot;javascript&quot;>
var i;
var nowColorR=153;
var nowColorG=153;
var nowColorB=153;
var nowStepsR;
var nowStepsG;
var nowStepsB;
var plusminusR;
var plusminusG;
var plusminusB;
var schritte;
var zielColorRSteps;
var zielColorGSteps;
var zielColorBSteps;

// Verändert die Farbe
function setColor() {
if(i>eval(schritte)-1)window.clearInterval(aktiv)
else{
if(nowStepsR<zielColorRSteps){
nowStepsR++;
nowColorR = nowColorR + plusminusR;
}
if(nowStepsG<zielColorGSteps){
nowStepsG++
nowColorG = nowColorG + plusminusG;
}
if(nowStepsB<zielColorBSteps){
nowStepsB++;
nowColorB = nowColorB + plusminusB;
}
durchgange++;
if(nowColorR<16){
digga1=&quot;0&quot;;
} else {
digga1=&quot;&quot;;
}
if(nowColorG<16){
digga2=&quot;0&quot;;
} else {
digga2=&quot;&quot;;
}
if(nowColorB<16){
digga3=&quot;0&quot;;
} else {
digga3=&quot;&quot;;
}
document.bgColor=&quot;#&quot; + digga1 + dx(nowColorR) + digga2 + dx(nowColorG) + digga3 + dx(nowColorB);
i++;
}
}

// Gibt ein positives Ergebnis zurück
function makePos (zahl){
if(zahl<0){zahl=zahl*-1;}
return zahl;
}

// Gibt 1 oder -1 zurück, jenachdem ob zahl1 oder zahl2 höher ist
function checkZahl (zahl1,zahl2){
if(zahl1<zahl2){
return -1;
}else{
return 1;
}
}

// Prüft, um &quot;wieviel&quot; eine Farbe verändert werden muss und
// führt alle 25/1000 sec die Funktion setColor aus
function cColor()
{
reset();
zielColorRSteps = makePos(eval(document.form.rein.value) - nowColorR);
plusminusR = checkZahl(eval(document.form.rein.value),nowColorR);
zielColorGSteps = makePos(eval(document.form.rein2.value) - nowColorG);
plusminusG = checkZahl(eval(document.form.rein2.value),nowColorG);
zielColorBSteps = makePos(eval(document.form.rein3.value) - nowColorB);
plusminusB = checkZahl(eval(document.form.rein3.value),nowColorB);
vergleich1=Math.max(zielColorRSteps,zielColorGSteps);
schritte=Math.max(vergleich1,zielColorBSteps);
aktiv=window.setInterval(&quot;setColor()&quot;,25);
}

// Setzt Variablen auf Null
function reset(){
i=0;
durchgange = 0;
nowStepsR = 0;
nowStepsG = 0;
nowStepsB = 0;
plusminusR = 0;
plusminusG = 0;
plusminusB = 0;
schritte = 0;
zielColorRSteps = 0;
zielColorGSteps = 0;
zielColorBSteps = 0;
}

// Rechnet von Dezimal nach Hexadezimal
function dx(d)
{
max = Math.pow(16,8);
var z = new Array(&quot;0&quot;,&quot;1&quot;,&quot;2&quot;,&quot;3&quot;,&quot;4&quot;,&quot;5&quot;,&quot;6&quot;,&quot;7&quot;,&quot;8&quot;,&quot;9&quot;,&quot;A&quot;,&quot;B&quot;,&quot;C&quot;,&quot;D&quot;,&quot;E&quot;,&quot;F&quot;);
var x = &quot;&quot;;
var i = 1, v = d, r = 0;
while(v > 15)
{ v = Math.floor(v / 16); i++; }
v = d;
for(j=i;j>=1;j--)
{
x = x + z[Math.floor(v / Math.pow(16,j-1))];
v = v - (Math.floor(v / Math.pow(16,j-1)) * Math.pow(16,j-1));
}
return x;
}
</script>

angucken (http://www.coding-board.de/tutorials/javascript/farbFader/)

Viel Spaß dabei!
Vllt kann man das ja noch optimieren :rolleyes::) ?!?

peace

[Mac Fly]

Feine Idee, nur leider passiert bei mir nix, wenn ich auf den Button klicke...
IE6 + XP

[maulwurf]

lol.. na du bist ja ne nase...&quot;beschäftigungstherapie&quot;...
mir würd schon was besseres einfallen als zu scripten.. :D

außerdem wars eher so, dass diggadance mir gezeigt hat, wies geht ;)

ne kleine ergänzung hab ich aba noch, weils vielleicht nich jeder sofort checkt... rgb= rot, grün, blau (zwischen 0 und 255)

war auf jeden n nettes tut! thx nochma

cya

[Aron]

Original von Mac Fly
Feine Idee, nur leider passiert bei mir nix, wenn ich auf den Button klicke...
IE6 + XP


Na, du musst schon was in die textfelder schreiben,
sonst hat das Script nix zutun. :D

[Mac Fly]

*ggg*
Bei mir waren bereits werte drinnen, nämlich überall 153.
Also hab ich geklickt und nix passierte ;)

Aber jetzt hab auch ichs gerafft, und es funzt 1a! ;)
Respekt!

[sami]

und was daran ist das tutorial? :P
btw, ich hasse tutorials

[Aron]

und was daran ist das tutorial?
Die Kommentare über den Funktionen! :D:D:D

[Dominic Suter]

Funktioniert leider nicht mit Opera 6.01 (Method not allowed). Aber im IE5.5 gehts wunderbar (nur, dass ich eigntlich HEX-Zahlen bevorzuge, das so am Rande)