hintergrundfarbe automatisch ändern - js

Ossipower · 29.05.2009

die hintergrundfarbe der seite soll sich fortlaufend ändern. also z.B. vom dunkelblau zu weiß und das in mehreren schritten (farben), so das ein fließender übergang entsteht.

habe im netz schon gesucht und hab nur diesen code gefunden:

Code:

<script type="text/javascript">

function yellow() {
    document.body.style.backgroundColor="yellow"
}
    
function blue() {
    document.body.style.backgroundColor="blue"
}

function red() {
    document.body.style.backgroundColor="red"
}

window.setTimeout("yellow()", 5000);

var count = 10;
zeit = 500;
function schleife() {
  if(count--)window.setTimeout(schleife, zeit);
  else alert('fertig');
}
schleife();

</script>

nur es klappt nicht.

1. wie kann ich die schleife ändern, dass diese eine endlosschleife wird?
müßte ja bei

Code:

var count = 10;

nur die 10 gegen unendlich austauschen, nur was gebe ich ein? und wenn ich das so machen würde hätte ich nach langer zeit keine farben mehr. :lol:
also müßte ich nach der schleife eine zweite schleife starten, die die farben wieder rückwärts anzeigt und dann am ende die erste schleife wieder startet.

klappt in der theorie wunderbar aber mein können in js reicht dafür noch nicht aus. habt ihr einen vorschlag?

2. wie kann ich sicher stellen, dass auch alle farben nach der reihe angezeigt werden?

welcher befehl dient dazu das die farben dann auch angezeigt werden

gruß
ossipower

cebito · 29.05.2009

AW: hintergrundfarbe automatisch ändern - js

Ossipower schrieb:
1. wie kann ich die schleife ändern, dass diese eine endlosschleife wird?
müßte ja bei

Code:

var count = 10;

nur die 10 gegen unendlich austauschen, nur was gebe ich ein? und wenn ich das so machen würde hätte ich nach langer zeit keine farben mehr. :lol:
also müßte ich nach der schleife eine zweite schleife starten, die die farben wieder rückwärts anzeigt und dann am ende die erste schleife wieder startet.

klappt in der theorie wunderbar aber mein können in js reicht dafür noch nicht aus. habt ihr einen vorschlag?

2. wie kann ich sicher stellen, dass auch alle farben nach der reihe angezeigt werden?

welcher befehl dient dazu das die farben dann auch angezeigt werden

gruß
ossipower

So, ohne Schleife:

Code:

<script type="text/javascript">
var farbe = new Array();
farbe[0] = "yellow";
farbe[1] = "blue";
farbe[2] = "red";
function HGfarbe(x) {
    document.body.style.backgroundColor = farbe[x];
    if (x < 2){
        x += 1;
        }
    else {
        x = 0;
        }
    window.setTimeout(function () { HGfarbe(x); }, 1000);
}
</script>

cebito · 29.05.2009

AW: hintergrundfarbe automatisch ändern - js

FreddyX2 schrieb:
Ist jetzt keine Lösung für dein Problem... Vielleicht findest du da eine Lösung

Warum keine Lösung benutzen um nach einer Lösung zu suchen die schon gefunden wurde? Die Lösung steht direkt über deinem Post!

netbandit · 29.05.2009

AW: hintergrundfarbe automatisch ändern - js

cebito schrieb:
Warum keine Lösung benutzen um nach einer Lösung zu suchen die schon gefunden wurde? Die Lösung steht direkt über deinem Post!

Code:

<script type="text/javascript">
var farbe = new Array();
farbe[0] = "yellow";
farbe[1] = "blue";
farbe[2] = "red";
function HGfarbe(x) {
    document.body.style.backgroundColor = farbe[x];
    if (x < 2){
        x += 1;
        }
    else {
        x = 0;
        }
    window.setTimeout(function () { HGfarbe(x); }, 1000);
}
</script>

funktioniert bei mir nicht (FF & IE).

Details zum Fehler auf der Webseite

Benutzer-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0)
Zeitstempel: Fri, 29 May 2009 18:16:56 UTC

Meldung: Objekt erforderlich
Zeile: 25
Zeichen: 5
Code: 0
URI: file:///C:/Dokumente%20und%20Einstellungen/Desktop/test.htm

Zeile 25:

Code:

document.body.style.backgroundColor = farbe[x];

€: Aaalso, Fehler den ich immer wieder mache: Funktion schon im Script aufgerufen. Kann natürlich erst funktionieren wenn die Seite bzw. der body geladen ist. Entschuldigung @ cebito, mein Fehler.

cebito · 30.05.2009

AW: hintergrundfarbe automatisch ändern - js

netbandit schrieb:
?: Aaalso, Fehler den ich immer wieder mache: Funktion schon im Script aufgerufen. Kann natürlich erst funktionieren wenn die Seite bzw. der body geladen ist. Entschuldigung @ cebito, mein Fehler.

no Prob

Ossipower · 30.05.2009

AW: hintergrundfarbe automatisch ändern - js

so bei mir klappt es nicht.

ich glaub ich habe es nicht richtig in den body geladen.

Code:

<body onload="HGfarbe(x)">

und dreamweaver gibt mir in zeile 11 einen fehler an

Code:

document.body.style.backgroundColor = farbe[x];

cebito · 30.05.2009

AW: hintergrundfarbe automatisch ändern - js

<body onload="HGfarbe(0);"> du musst einen Wert übergeben

Ossipower · 30.05.2009

AW: hintergrundfarbe automatisch ändern - js

ok, das klappt schon mal.

ich habe jetzt mal eine vierte farbe mit eingegeben.

das scheint nicht zu klappen.

Code:

 <script type="text/javascript">
var farbe = new Array();
farbe[0] = "yellow";
farbe[1] = "blue";
farbe[2] = "red";
[COLOR=Red]farbe[3] = "green";[/COLOR]
function HGfarbe(x) {
    document.body.style.backgroundColor = farbe[x];
    if (x < 2){
        x += 1;
        }
    else {
        x = 0;
        }
    window.setTimeout(function () { HGfarbe(x); }, 1000);
}
</script>

Ossipower · 30.05.2009

AW: hintergrundfarbe automatisch ändern - js

ok, hab ich gefunden

habe

Code:

if (x < 2)

erhöht.

danke für die hilfe. top leistung

gruß
ossipower

cebito · 30.05.2009

AW: hintergrundfarbe automatisch ändern - js

Wenn du es rückwärts laufen lassen willst, kannst du es z.B. so machen:

Code:

var farbe = new Array();
farbe[0] = "white";
farbe[1] = "yellow";
farbe[2] = "red";
farbe[3] = "blue";
farbe[4] = "black";
farbe[5] = "blue";
farbe[6] = "red";
farbe[7] = "yellow";

einfach die Farben nochmal reinschreiben.

Zu deiner Frage oben, eine Endlosschleife könnte so aussehen:

Code:

function endlosschleife(){
    while (y <= 9) {    
    document.write (y);
    if (y < 9){
        y += 1;
        }
    else {
        y = 0;
        }
    }
}

Solange y<=9 ist wird die Schleife durchlaufen. Wenn y=9 ist, wird es aber auf 0 gesetzt, sodass die Bedingung für die Schleife nie false wird. Sowas sollte man aber tunlichst vermeiden oder aber in der Schleife eine andere Abbruchbedingung schaffen, sonst lässt sich das ganze nur noch beenden indem man den Browser "hart" beendet

Dafür würden dich deine Besucher mögen

netbandit · 30.05.2009

AW: hintergrundfarbe automatisch ändern - js

Als kleine Anregung vielleicht noch: mit farbe.length lässt sich wunderbar die Anzahl der hinterlegten Farben ermitteln

Ossipower · 30.05.2009

AW: hintergrundfarbe automatisch ändern - js

Sowas sollte man aber tunlichst vermeiden oder aber in der Schleife eine andere Abbruchbedingung schaffen, sonst lässt sich das ganze nur noch beenden indem man den Browser "hart" beendet

hab ich mir gedacht, aber ich hatte nicht gewußt wie ich es sonst gehen soll.

Als kleine Anregung vielleicht noch: mit farbe.length lässt sich wunderbar die Anzahl der hinterlegten Farben ermitteln

was kann ich mit farbe.length anfangen?

noch eine kleine frage anbei. gibt es eine möglichkeit eine farbenpallette einzufügen. z.B. pallette rot - blau, die automatisch durchlaufen wird. so das die übergänge nicht so hart sind oder muß ich diese dann doch von hand eingeben? oder gibt es eine art fader?

cebito · 30.05.2009

AW: hintergrundfarbe automatisch ändern - js

Ossipower schrieb:
was kann ich mit farbe.length anfangen?

noch eine kleine frage anbei. gibt es eine möglichkeit eine farbenpallette einzufügen. z.B. pallette rot - blau, die automatisch durchlaufen wird. so das die übergänge nicht so hart sind oder muß ich diese dann doch von hand eingeben? oder gibt es eine art fader?

farbe.length sagt dir wie groß das Array "farbe" ist.

Eine art fader könnte man schreiben. Farben in RGB-Werten angeben und die einzeln hochzählen (nur nicht gleichzeitig, sonst gibts nur Grauwerte. Mal sehn, vielleicht hab ich am Montag Zeit :rolleyes:

Jetzt muss ich mich erstmal für 'ne Hochzeit schickmachen

Ossipower · 30.05.2009

AW: hintergrundfarbe automatisch ändern - js

ah ok, farbe.length kappiert.

deine hochzeit? wenn ja, alles gute. wenn nein, viel spaß.

gruß
ossipower

cebito · 30.05.2009

AW: hintergrundfarbe automatisch ändern - js

Ossipower schrieb:
deine hochzeit?

nee nee :schmoll: für so Scherze bin ich zu alt :lol:

cebito · 31.05.2009

AW: hintergrundfarbe automatisch ändern - js

Hab mich mal drangemacht, durchläuft jetzt nicht alle Farben, soll aber auch nur als Anregung dienen - du darfst gerne noch ein wenig weiterspielen

Code:

<script type="text/javascript">
    var farbwert = new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F");
    var x = new Array(15, 15, 0, 0, 0, 0);
    var zustand = 0;
    function HGfader() {
        if (zustand < 6) {
            zustand += 1;
        }
        else {
            zustand = 1;
        }
        switch (zustand) {
            case 1:
                plus(4,5); 
                break;
            case 2:
                minus(0,1); 
                break;
            case 3:
                plus(2,3); 
                break;
            case 4:
                plus(0,1); 
                break;
            case 5:
                minus(4,5); 
                break;
            case 6:
                minus(2,3); 
                break;
            }
    }
    function plus(i,j) {
        farbe();
        x[j] += 1;
        if (x[i] < 15) {
            if (x[j] == 15) {
                x[i] += 1;
                x[j] = 0;
                }        
            window.setTimeout(function () { plus(i,j); }, 100);
            }
        else {
            HGfader();
        }
    }
    function minus(i,j) {
        farbe();
        x[j] -= 1;
        if (x[i] > 0) {
            if (x[j] == 0) {
                x[i] -= 1;
                x[j] = 15;
                }        
                window.setTimeout(function () { minus(i,j); }, 100);
            }
        else {
            HGfader();
        }
    }
    function farbe() {
    document.body.style.backgroundColor = "#" + farbwert[x[0]] + farbwert[x[1]] + farbwert[x[2]] + farbwert[x[3]] + farbwert[x[4]] + farbwert[x[5]];
    }
</script>

Ossipower · 01.06.2009

AW: hintergrundfarbe automatisch ändern - js

hi,

ok, werde mich jetzt mal damit auseinandersetzen. werde mich aber bestimmt nochmal melden.

danke erstmal.

gruß
ossipower