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

    0

    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ů.

    <input type=“button“ value=“+ Red“ onClick=“changeBackground2(1)“>
    <input type=“button“ value=“- Red“ onClick=“changeBackground2(4)“>
    <input type=“button“ value=“+ Green“ onClick=“changeBackground2(2)“>
    <input type=“button“ value=“- Green“ onClick=“changeBackground2(5)“>
    <input type=“button“ value=“+ Blue“ onClick=“changeBackground2(3)“>
    <input type=“button“ value=“- Blue“ onClick=“changeBackground2(6)“>

    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.

    Starší komentáře ke článku

    Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.

    Žádný příspěvek v diskuzi

    Odpovědět