Schleife mit Farbveränderung


for(Zählvariable, Bedingung, Zählmuster){
auszuführende Anweisung sooft bis Bedingung nicht mehr erfüllt ist;
}


<script>

let i;

function farbe(){
for(i=1;i<=255;i++) {
document.getElementsByTagName("div")[i].style.backgroundColor = "hsl("+String(i*10)+",100%, 50%)" ;
}
}


</script>


<body onLoad="farbe()";


Erklärung:
Hier hab ich mal eine For Schleife mit Farbveränderung eingefügt
Ich habe oben 36 div Elemente eingefügt. welche mit dem Dom Objekt der Reihe nach angesprochen werden. Desweiteren habe ich mir die CSS Eigenschaft hsl hier zunutze gemacht, da es damit einfach ist den Farbton schrittweise zu bestimmen. Es gibt 360 Farbtöne. Diese werden in 10er Schritten auf den 36 Div Elementen zugewiesen.

Hierbei kommt es wieder darauf an, dass man die Strings mit Verknüpfungsoperator + Zeichen zusammenfügt. Man kann nicht schreiben.

"hsl ( i*10, 50%, 50%)"Diese Schreibweise würde i nicht als Variable erkennen sondern einfach als Buchstaben i.

Der Aufruf der Funktion wird im body Tag mit onLoad="farbe()" vollzogen.


Javascript Tipps