Jaro - změna CSS pomocí JavaScriptu

Vydávání, hosting a aktualizace umožňují jeho sponzoři.
Malá hříčka, která vám do prohlížeče v zimním období načte jaro.
Jak jistě víte, JavaScript dotváří stránku na klientské straně, takže nepotřebujete žádný server s podporou PHP, nic takového (to jen tak pro úplnost). Kromě základního designu stánky jsou na ní i DIVy, které jsou implicitně skryté pomocí CSS vlastnosti "display: none;". Ve formuláři máme tlačítko, které má na sobě JavaScriptovou událost "onClick", ve které se vyvolá funkce "show_loading()" deklarovaná na začátku stránky. Ta nejenže zviditelní DIV s animací načítání ale nastaví také časovač, který za 5 vteřin vyhodí chybovou hlášku.
Toto je kód v hlavičce stránky:
<script language="javascript">
function show_loading() {
loading.style.display='block';
window.setTimeout("show_error()",5000);
}
function show_error() {
loading.style.display='none';
chyba.style.display='block';
}
</script>
A toto je HTML, které je kódem ovádáno:
<div id="loading">
<p>
<img src="img/loading.gif" alt="Načítání"><br>
<i>Načítám jaro...</i>
</p>
</div>
<div id="chyba">
<p>
<i>Bohužel, ve vašem regionu není jaro dostupné.<br>
Zkuste Floridu...</i>
</p>
</div>
<form action="" method="post">
<p>
<input type="button" name="spustit" value="Spustit jaro" onclick="show_loading();">
</p>
</form>
Pro správné adresování prvků stránky je potřeba přiřadit jim nějké id, potom můžeme jejich vlastnosti upravovat pomocí tečkové notace.
Galerie

Stáhnout
Staženo 401x (708.45 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript
Komentáře


Zobrazeno 8 zpráv z 8.