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

Помощь дата->рейтинг Поиск Почта RSS канал Статистика nickolay.info Домой

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

Серверное программирование для этой задачи не нужно, достаточно 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 включительно в его шестнадцатеричную запись.


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

20.08.2011, 15:36; рейтинг: 9868

  свежие записипоиск по блогукомментариистатистикао "вирусах" в архивах .zip

Наверх Яндекс.Метрика
© PerS
вход