Plynulá změna barvy pozadí stránky pomocí JavaScriptu

7. září 2001

•

Na interval.cz již vyšel článek, který vám dovoloval změnit barvu pozadí stránky dle vašeho výběru. K dispozici však bylo pouze 16 barev. V tomto článku vám ukáži jednoduchý skript, který nastaví barvu pozadí pomocí míchání tří základních barev – červené, zelené a modré.

Nejprve se jako vždy nejprve podívejte na ukázku toho, jak níže popisovaný skript funguje.

V ukázce je vidět, že barvu pozadí stránky ovládáte šesti tlačítky na přidání, nebo naopak odebrání sytosti jedné ze zmiňovaných základních barev. Prvním krokem tedy bude zapsání těchto HTML prvků.

Jednoduchá tlačítka (doporučuji zarovnat do tabulky), která událostí onClick volají funkci changeBackground2() s číselným parametrem. Tato funkce vypadá takto:

prefix=“#“;
rnum1=0;
bnum1=0;
gnum1=0;
rnum2=0;
bnum2=0;
gnum2=0;
hexNumber2=“#000000″;
rcount=0;
bcount=0;
gcount=0;
function changeBackground2(number) {
  if (number == 1) {
    rnum1 = rcount % 16;
    if (rcount < 15) {
    rcount++;
    }
  }
  if (number == 2) {
    gnum1 = gcount % 16;
    if (gcount < 15) {
      gcount++;
    }
  }
  if (number == 3) {
    bnum1 = bcount % 16;
    if (bcount < 15) {
      bcount++;
    }
  }
  if (number == 4) {
    rnum1 = rcount % 16;
    if (rcount > 0) {
      rcount–;
    }
  }
  if (number == 5) {
    gnum1 = gcount % 16;
    if (gcount > 0) {
      gcount–;
    }
  }
  if (number == 6) {
    bnum1 = bcount % 16;
    if (bcount > 0) {
      bcount–;
    }
  }
  hexNumber2 = prefix+num2hex(rnum1)+num2hex(rnum1)+num2hex(gnum1)+num2hex(gnum1)+num2hex(bnum1)+num2hex(bnum1);
  document.bgColor = hexNumber2;
}

Funkce je pomocí podmínek if rozdělena na šest částí. Tyto podmínky kontrolují funkční parametr, který určuje, která z globálních proměnných definovaných před funkcí se bude měnit. Všechny části pracují zcela stejně a proto stačí popsat jen jednu.

Např. první část (pokud je parametr 1) nastaví proměnnou rnum1 na zbytek po celočíselném dělení rcount/16. Rcount je při prvním volání funkce roven 0; z toho vyplývá, že rnum1 bude 16. Pak vnořená podmínka proměnnou rcount inkrementuje (pokud už není větší než 14). Při dalším zavolání funkce dostane rnum1 hodnotu 15. Poslední 3 části funkce svoji proměnnou (rcount, bcount a gcount) dekrementují – jsou to části, které volají tlačítka na odebírání barvy.

Předposlední příkaz nastavuje proměnnou hexNumber2, která reprezentuje hexadecimální zápis barvy. První znak je konstanta prefix – tedy #. Další znaky jsou vkládány pomocí funkce num2hex(), která konvertuje číslo na jeho hexadecimální zápis. Proměnné jsou vkládány vždy dvakrát za sebou, můžeme dostat tedy číslo např. #33EEFF, abychom se drželi bezpečných barev webu. Pro vaši informaci – první dvojice znaků určuje červenou složku, druhá zelenou a třetí modrou. Poslední příkaz nastaví pomocí vlastnosti bgColor novou barvu pozadí.

Funkce num2hex():

function num2hex(num){
  switch (num){
    case 15: return „f“;
    case 14: return „e“;
    case 13: return „d“;
    case 12: return „c“;
    case 11: return „b“;
     case 10: return „a“;
    case 9: return „9“;
    case 8: return „8“;
    case 7: return „7“;
    case 6: return „6“;
    case 5: return „5“;
    case 4: return „4“;
    case 3: return „3“;
    case 2: return „2“;
    case 1: return „1“;
    default: return „0“;
    }
}

Tato funkce pomocí příkazu switch vrací číslo předané v parametru v jeho hexadecimálním formátu. Pro jakékoli číslo, které nepatří do intervalu 1 – 15 vrací 0. To je zajištěno návěštím default. Pro čísla 10 – 15 vrací hexadecimální ekvivalenty a – f. Pro 1 – 9 nechává číslo nezměněno.

Přeji hezký den.