Jaro - změna CSS pomocí JavaScriptu

Malá hříčka, která vám do prohlížeče v zimním období načte jaro.

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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