Výběr barvy z roletového menu a náhodná barva pozadí

18. května 2000

•

Mnoho serverů vám dnes nabízí možnost jeho upravit podle svého vkusu. Je možné si například vybírat z několika barevných schémat, je možné měnit obsah úvodní stránky apod. V tomto článku vám ukáži, jak pouhým výběrem barvy z roletového menu nastavit tuto barvu pro pozadí stránky a jak při každém přístupu na stránku nastavit náhodnou barvu pozadí.

Barva v roletovém menu

Skript není opravdu složitý a jak je vidět z následující tabulky, nejvíce místa v něm zabere definování jednotlivých barev. Je použita událost onChange, pomocí které se vybraná barva nastaví na pozadí stránky ihned po výběru položky:

<FORM>
SELECT Size=1 onChange=“document.bgColor=this.options[this.selectedIndex].value“>
<OPTION VALUE=“Black“>Black
<OPTION VALUE=“Maroon“>Maroon
<OPTION VALUE=“Green“>Green
<OPTION VALUE=“Olive“>Olive
<OPTION VALUE=“Navy“>Navy
<OPTION VALUE=“Purple“>Purple
<OPTION VALUE=“Teal“>Teal
<OPTION VALUE=“Silver“>Silver
<OPTION VALUE=“Gray“>Gray
<OPTION VALUE=“Red“>Red
<OPTION VALUE=“Lime“>Lime
<OPTION VALUE=“Blue“>Blue
<OPTION VALUE=“Fuchsia“>Fuchsia
<OPTION VALUE=“Aqua“>Aqua
<OPTION VALUE=“White“>White
</SELECT></FORM>

Z uvedeného kódu je vidět, že barvy jsou definovány v parametru Value tagu Option. Počet či samotné barvy si pochopitelně můžete libovolně změnit, já jsem použil pro demonstraci základních 16 barev Windows.

Skript by měl bez problémů fungovat ve čtvrtých verzích prohlížečů – testováno v Internet Exploreru 5.0 a Netscape Navigatoru 4.7.

Náhodné pozadí stránky

Možná jste už našli na Internetu stránky, které při každém přístupu nebo reloadu měly odlišnou barvu pozadí. To je možné udělat pomocí JavaScriptu, který naleznete níže uvedené v tabulce. Tento skript můžete nyní použít i vy pro své stránky.

Skript funguje tak, že barvy generuje podle aktuálního času – konkrétně, generuje barvy podle aktuální sekundy – k tomu slouží funkce „getSeconds“.

<BODY onload=“nahodnePozadi()“>
<SCRIPT LANGUAGE=“JavaScript“>
<!–
function backcolor(body) {
temp = „“
for (var i = 0; i < 16; i++) {
temp = body.color[i].value
if (body.color[i].checked){ document.bgColor = temp }
}
}
function nahodnePozadi() {
document.bgColor = getColor()
}
function getColor(){
currentdate = new Date()
barvaPozadi = currentdate.getSeconds()
if (barvaPozadi > 44)
barvaPozadi = barvaPozadi – 45
else if (barvaPozadi > 29)
barvaPozadi = barvaPozadi – 30
else if (barvaPozadi > 15)
barvaPozadi = barvaPozadi – 16
if (barvaPozadi == 0 )
return „Black“;
else if (barvaPozadi == 1 )
return „Maroon“;
else if (barvaPozadi == 2 )
return „Green“;
else if (barvaPozadi == 3 )
return „Olive“;
else if (barvaPozadi == 4 )
return „Navy“;
else if (barvaPozadi == 5 )
return „Purple“;
else if (barvaPozadi == 6 )
return „Teal“;
else if (barvaPozadi == 7 )
return „Silver“;
else if (barvaPozadi == 8 )
return „Gray“;
else if (barvaPozadi == 9 )
return „Red“;
else if (barvaPozadi == 10 )
return „Lime“;
else if (barvaPozadi == 11 )
return „Yellow“;
else if (barvaPozadi == 12 )
return „Blue“;
else if (barvaPozadi == 13 )
return „Fuchsia“;
else if (barvaPozadi == 14 )
return „Aqua“;
else if (barvaPozadi == 15 )
return „White“;
}
// –>
</SCRIPT>

Bystří uživatelé si ovšem všimnou, že je definováno pouze 16 barev, zatímco minuta jich má celých šedesát – v případě, že uživatel by přistoupil na stránku v rozmezí 17 až 59 sekundy, žádná barva by se mu nezobrazila, což je jistě chyba. Skript ovšem řeší i tohle – v JavaScriptu jsou právě pro tuto situaci definovány čtyři podmínky, které rozdělují 60 sekund na čtyři pásma: 0-15 sekund, 16-29 sekund, 30-44 sekund a 45-59 sekund a na základě daného počtu sekund skript vypočítá číslo barvy – proměnná „barvaPozadi“.

Jak už bylo napsáno v předchozím odstavci, pro demonstraci bylo použito šestnáct základních barev pro Windows. Skript byl testován a fungoval bez problémů v Internet Exploreru 5.0 a Netscape Navigatoru 4.7.