БлогNot. Динамически (с шагом по времени) меняем фоновый цвет документа

Динамически (с шагом по времени) меняем фоновый цвет документа

Серверное программирование для этой задачи не нужно, достаточно 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 [11087 просмотров]


теги: программирование javascript цвет числа время браузеры

К этой статье пока нет комментариев, Ваш будет первым