Nickolay.info. Javascript. Динамическая смена фонового цвета документа с шагом по времени

Серверное программирование для этой задачи не нужно, достаточно 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. Статья устарела, в новых браузерах всё проще.

гостевая; E-mail