Hallo,
<script type="text/javascript">
[code lang=javascript]
var createColorObj;
createColorObj = function (value, range) {
return {
"value": value,
"tmpValue" : value,
"range" : range,
"goDown" : true
};
};
var createColorHandler;
createColorHandler = function (red, green, blue) {
return {
// second parameter is range in which color is to be changed
"red": createColorObj(red, 55),
"green": createColorObj(green, 10),
"blue": createColorObj(blue, 16),
getValue : function (thisObj, colorName) {
if (thisObj[colorName].tmpValue < thisObj[colorName].value - thisObj[colorName].range) {
thisObj[colorName].goDown = false;
}
if (thisObj[colorName].tmpValue > thisObj[colorName].value) {
thisObj[colorName].goDown = true;
}
if (thisObj[colorName].goDown) {
thisObj[colorName].tmpValue -= 1;
} else {
thisObj[colorName].tmpValue += 1;
}
return thisObj[colorName].tmpValue;
}
};
};
window.onload = function () {
var myBody, colorHandler, myBgColorChange;
myBody = document.getElementsByTagName("body")[0];
colorHandler = createColorHandler(255, 168, 136);
myBgColorChange = function () {
var red, green, blue;
red = colorHandler.getValue(colorHandler, "red");
green = colorHandler.getValue(colorHandler, "green");
blue = colorHandler.getValue(colorHandler, "blue");
myBody.style.backgroundColor = "RGB(" + red + "," + green + "," + blue + ")";
};
window.setInterval("myBgColorChange()", "120");
};
</script>
<body>
</body>
[/code]
Kriegt man das besser/übersichtlicher bzw. einfacher hin? Ich übergebe der Objektmethode getValue jetzt immer das eigene Objekt mit, denn "this" verweist ja durch setInterval dann bereits aufs Windows-Objekt, oder?
Sinn bzw. Spielerei ist, von RGB-Basiswerten in einem für jede Farbe unterschiedlichem Range die Farbe runter und wieder rauf und wieder runter etc.pp. wechseln zu lassen. Code funzt und passiert auch JSLint.
Gruß
jobo