Jar - zmena CSS pomocou JavaScriptu

Malá hračka, ktorá vám do prehliadača v zimnom období načíta jar.

Ako iste viete, JavaScript dotvára stránku na klientskej strane, takže nepotrebujete žiadny server s podporou PHP, nič také (to len tak pre úplnosť). Okrem základného dizajnu stánky sú na nej aj divy, ktoré sú implicitne skryté pomocou CSS vlastnosti "display: none;". Vo formulári máme tlačidlo, ktoré má na sebe javascriptové udalosť "OnClick", v ktorej sa vyvolá funkcia "show_loading ()" deklarovaná na začiatku stránky. Tá nielenže zviditeľní DIV s animáciou načítanie ale nastaví tiež časovač, ktorý za 5 sekúnd vyhodí chybovú hlášku.

Toto je kód v hlavičke 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, ktoré je kódom ovádání:

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

Pre správne adresovanie prvkov stránky je potreba priradiť im nějkou id, potom môžeme ich vlastnosti upravovať pomocou tečkové notácie.

Galéria