Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
Pouze tento týden sleva až 80 % na e-learning týkající se Java. Zároveň využij akce až 80 % zdarma při nákupu e-learningu. Více informací:

Jaro - změna CSS pomocí JavaScriptu

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

Program byl vytvořen v roce 2013.

 

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 411x (708.45 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

 

Všechny články v sekci
JavaScript zdrojákoviště - Základní konstrukce jazyka
Program pro vás napsal Vojtěch Mašek (Woyta)
Avatar
Uživatelské hodnocení:
5 hlasů
Autor se aktivně věnuje tvorbě webových stránek a aplikací s použitím HTML 5, CSS 3, PHP a MySQL. Dále se zajímá o počítačovou grafiku (Photoshop), 3D modelování (AutoCAD) a vizuální a zvukové efekty... prostě od všeho trochu.
Aktivity