Plynulá změna barvy pozadí stránky pomocí JavaScriptu
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:
|
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():
|
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.
Mohlo by vás také zajímat
-
Nepodceňte UX na vašem webu: Proč na něm záleží?
10. dubna 2024 -
Jak vybrat doménu: Co je dobré vědět?
2. září 2024 -
inPage AI: Jak na generování obsahu
18. července 2024
Nejnovější
-
Apple jde naproti práci s HDR monitory!
17. ledna 2025 -
Jak využít AI potenciál svého Macu?
9. ledna 2025 -
NIS2: Verifikace údajů vlastníků domén
6. ledna 2025 -
Dostali jste k vánocům PC? Využijte jeho AI potenciál!
3. ledna 2025