2 КЛАССЫ И ОБЪЕКТЫ В JAVASCRIPT

Сценарии JavaScript в активных страницах Web

Плавное изменение цвета фона документа HTML

Просматривая страницы некоторых серверов Web, вы могли обратить внимание, что цвет их фона начинает плавно изменяться сразу после загрузки, становясь постепенно светлее или наоборот, темнее. Аналогичный эффект может быть получен не только для цвета фона, но и для цвета текста, а также гипертекстовых ссылок. Вы можете сделать, например, так, чтобы строки текста постепенно проявлялись на фоне страницы или исчезали (чтобы посетитель не успел их прочесть).

Сложный на первый взгляд эффект достигается чрезвычайно просто: изменением свойства bgColor объекта document. В листинге 2.10 мы привели пример сценария, который после загрузки документа HTML в окно браузера изменяет цвет его фона с белого на черный.

Листинг 2.10. Файл chapter2/ChangeBkg/ChangeBkg.html


<HTML>
  <HEAD>
    <TITLE>Color Links</TITLE>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    var nRed = 255;
    var nGreen = 255;
    var nBlue = 255;

    function colorShift()
    {
      var cmd = "colorShift()";

      document.bgColor = "#" +
        dec2hex(nRed) + 
        dec2hex(nGreen) +
        dec2hex(nBlue);

      if(nRed > 0)
      {
        nRed   -= 10;
        nGreen -= 10;
        nBlue  -= 10;
      }

      timer = window.setTimeout(cmd, 50);
    }

    function dec2hex(nDec) 
    {
      var szHexTable="0123456789ABCDEF";
      var szResult = "";
      var szBuf="";
      var nRem = 0;
      var bNegative=false;

      if(nDec < 0)
      {
        bNegative=true;
        nDec = -nDec;
      }

      nTmp=nDec;
      
      while(true)
      {
        nRem = nTmp % 16;
        nTmp = nTmp / 16;

        if(Math.floor(nTmp) < 16)
          break;

        szBuf=szHexTable.charAt(nRem);
        szResult = szBuf.concat(szResult);
      }
    
      szBuf=szHexTable.charAt(nRem);
      szResult = szBuf.concat(szResult);

      if(Math.floor(nTmp) != 0)
      {
        szBuf=szHexTable.charAt(Math.floor(nTmp));
        szResult = szBuf.concat(szResult);
      }

     if(bNegative == true)
        return ("-" + szResult);
     else
        return szResult;
    }
    // -->
    </SCRIPT>
  </HEAD>
  <BODY BGCOLOR=white>
    <H1>Изменение цветового оформления</H1>
    <P>Посетите эти серверы:
    <P><A HREF="http://www.glasnet.ru/~frolov/index.html">Наша домашняя страница</A>
    <P><A HREF="http://www.auramedia.ru">Каталог программ Auramedia</A>
    <P><A HREF="http://www.microsoft.com/java/">Страница сервера Microsoft про Java</A>
    <P><A HREF="ColorLinks.html#Локальный раздел">Локальный раздел</A>

    <HR>
    <H1><A NAME="Локальный раздел">Локальный раздел</A></H1>
    <P>Этот локальный раздел вы можете просмотреть, даже если
ваш компьютер не подключен к Internet
    <SCRIPT LANGUAGE="JavaScript">
    <!--
      colorShift();
    // -->
    </SCRIPT>
  </BODY>
</HTML>

Работа сценария начинается после загрузки документа с вызова функции colorShift. Это вызов расположен в конце области тела документа HTML.

Функция постепенно уменьшает значение красной, зеленой и голубой компоненты цвета. Начальные значения этих компонент хранятся в глобальных переменных nRed, nGreen и nBlue:


var nRed = 255;
var nGreen = 255;
var nBlue = 255;

Значение цвета фона формируется следующим образом:


document.bgColor = "#" + 
  dec2hex(nRed) + dec2hex(nGreen) + dec2hex(nBlue);

Здесь при помощи функции dec2hex мы преобразуем десятичное значение цветовой компоненты в шестнадцатеричное. Эта функция будет описана подробно позже в разделе “Шестнадцатеричный калькулятор” третьей главы.

Далее после установки цвета фона мы проверяем значение красной цветовой компоненты, и если оно больше нуля, уменьшаем его и значение других цветовых компонент на 10:


if(nRed > 0)
{
  nRed   -= 10;
  nGreen -= 10;
  nBlue  -= 10;
}

Для того чтобы функция colorShift вызывалась периодически, мы используем метод setTimeout, вызывая его в конце функции:


var cmd = "colorShift()";
timer = window.setTimeout(cmd, 50);

В результате функция colorShift будет вызываться каждые 50 миллисекунд.