Динамически (с шагом по времени) меняем фоновый цвет документа
Серверное программирование для этой задачи не нужно, достаточно Javascript. Для простоты будем менять
цвет от белого к чёрному, начав сразу же после загрузки страницы (вызов функции change_bg по событию
onload тега <body>). Разумеется, можно иначе организовать работу функции change_bg и получить
другой эффект.
Сначала попробуем упрощённую версию скрипта, предполагающую, что браузер сможет получить цвет RGB с помощью соответствующего стилевого указания rgb:
<HTML>
<HEAD>
<TITLE>Динамическая смена фона</TITLE>
<script type="text/javascript">
function change_bg (x) {
if (x<256) {
var z=255-x;
document.bgColor='rgb('+z+','+z+','+z+')';
x+=2;
window.setTimeout("change_bg("+x+")",100);
}
}
</script>
</HEAD>
<body onload="change_bg(0)">
</body>
</HTML>
Если скопировать этот документ в файл с расширением .html и запустить в браузере, мы увидим, как фоновый цвет документа постепенно меняется с белого на чёрный. "Шаг" изменения равен 2 (оператор x+=2), а каждое изменение делается через 100 миллисекунд (параметр 100 в вызове window.setTimeout), при желании эти числа можно поменять.
В IE и Google Chrome это отработает корректно, в новом ТорMozilla Firefox 6 будут дикие мерцания
и наложения цвета,
в "жОпере" фон изначально будет зелёным - похоже, эти браузеры не понимают записи rgb, ведь таймаут в
100 миллисекунд - достаточно большой, да и смена его на 250 не помогла.
Придётся написать пару недостающих функций самостоятельно, тогда получим код, который сработал во всех 4 указанных выше браузерах:
<HTML>
<HEAD>
<TITLE>Динамическая смена фона</TITLE>
<script type="text/javascript">
var hexNum=new Array('0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F');
function toHex(num) {
if (num<0) return "00";
else if (num>255) return "FF";
else return ""+hexNum[Math.floor(num/16)]+hexNum[num%16];
}
function newBgcolor(red,green,blue) {
var hexRed= toHex(red);
var hexGreen=toHex(green);
var hexBlue= toHex(blue);
document.bgColor="#"+hexRed+hexGreen+hexBlue;
}
function change_bg (x) {
if (x<256) {
var z=255-x;
newBgcolor(z,z,z);
x+=2;
window.setTimeout("change_bg("+x+")",100);
}
}
</script>
</HEAD>
<body onload="change_bg(0)">
</body>
</HTML>
Здесь функция newBgcolor ставит фоновый цвет документа, заданный десятичными числами-параметрами
red, green и blue. Служебная функция toHex(num) переводит десятичное число num со значением
от 0 до 255 включительно в его шестнадцатеричную запись.
P.S. В более новых браузерах такие ухищрения не нужны, а достаточно
<!DOCTYPE HTML>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Динамическая смена фона</title>
<script>
function change_bg (c,dc) {
document.body.style.backgroundColor = 'rgb('+c+','+c+','+c+')';
c+=dc;
if (c%256==0) dc = -dc;
setTimeout(change_bg,100,c,dc);
}
document.addEventListener('DOMContentLoaded', function(event) {
change_bg (255,1);
});
</script>
</head>
<body>
</body>
</html>
20.08.2011, 15:36 [11158 просмотров]