HTML Farbwechsel mit Javascript
Im Script
SetColor
können sie sehen wie die Hintergrundfarbe des Inhaltsverzeichnisses dynamisch verändert wird.
Die Funktionen
ConvertToByte
und
ByteWertUmsetzen
werden verwendet um die dezimalen Farbwerte
in die hexadezimalen Farbwerte zu übersetzen.
function SetColor() {
ByteColor1 = ConvertToByte(color1);
ByteColor2 = ConvertToByte(color2);
ByteColor3 = ConvertToByte(color3);
AktColor = ByteColor1 + ByteColor2 + ByteColor3;
document.getElementById("Inhaltsverzeichnis").style.backgroundColor = "#" + AktColor;
if (color1 + color2 + color3 > 332){
document.getElementById("Inhaltsverzeichnis").style.color = "#000000";
}
else {
document.getElementById("Inhaltsverzeichnis").style.color = "#FFFFFF";
}
setTimeout("SetColor()",5);
if (Directory == "UP"){
if (ByteColor1 == "FF" && ByteColor2 == "FF" && ByteColor3 == "FF") {
Directory = "DOWN";
}
else if (color1 < 255) {
color1++;
}
else if (color2 < 255) {
color2++;
}
else if (color3 < 255) {
color3++;
}
}
else{
if (ByteColor1 == "00" && ByteColor2 == "00" && ByteColor3 == "00") {
Directory = "UP";
}
else if (color1 > 0) {
color1--;
}
else if (color2 > 0) {
color2--;
}
else if (color3 > 0) {
color3--;
}
}
}
function ConvertToByte(Zahl){
var ByteWert;
var Tester0 = ByteWertUmsetzen(Math.floor (Zahl / 16));
var Tester1 = ByteWertUmsetzen(Zahl % 16);
ByteWert = Tester0 + Tester1;
return ByteWert;
}
function ByteWertUmsetzen(Zahl){
var ByteUmgesetzt;
switch (Zahl) {
case 0:ByteUmgesetzt = "0";break;
case 1:ByteUmgesetzt = "1";break;
case 2:ByteUmgesetzt = "2";break;
case 3:ByteUmgesetzt = "3";break;
case 4:ByteUmgesetzt = "4";break;
case 5:ByteUmgesetzt = "5";break;
case 6:ByteUmgesetzt = "6";break;
case 7:ByteUmgesetzt = "7";break;
case 8:ByteUmgesetzt = "8";break;
case 9:ByteUmgesetzt = "9";break;
case 10:ByteUmgesetzt = "A";break;
case 11:ByteUmgesetzt = "B";break;
case 12:ByteUmgesetzt = "C";break;
case 13:ByteUmgesetzt = "D";break;
case 14:ByteUmgesetzt = "E";break;
case 15:ByteUmgesetzt = "F";break;
}
return ByteUmgesetzt;
}