Body zdarma Java týden
Využij podzimních slev a získej od nás až 40 % bodů zdarma! Více zde
Pouze tento týden sleva až 80 % na Java e-learning!

Jaro - změna CSS pomocí JavaScriptu

Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem.
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.

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

Program byl vytvořen v roce 2013.

 

Stáhnout

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

 

 

Program pro vás napsal Vojtěch Mašek (Woyta)
Avatar
Jak se ti líbí článek?
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.
Všechny články v sekci
JavaScript zdrojákoviště - Základní konstrukce jazyka
Aktivity (1)

 

 

Komentáře

Avatar
Michal Žůrek - misaz:29.3.2013 23:09

:D Dobré to máš.

 
Odpovědět 29.3.2013 23:09
Avatar
Anonym
Člen
Avatar
Anonym:31.3.2013 15:59

Nevíš jak udělat aby třeba v určitý den, nebo čas se pozadí změnilo? Díky :)

 
Odpovědět 31.3.2013 15:59
Avatar
Odpovídá na Anonym
Michal Žůrek - misaz:31.3.2013 17:55

javascriptem

var datum = new Date()

pak si to rozložíš

 
Odpovědět 31.3.2013 17:55
Avatar
Anonym
Člen
Avatar
Odpovídá na Michal Žůrek - misaz
Anonym:3.4.2013 16:52

achjo :( já s javascriptem nemám nic společnýho tak snad zjistím další kod :/ :D

 
Odpovědět 3.4.2013 16:52
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Anonym
David Čápka:3.4.2013 16:59

Nedávno jsem takový kód posílal k ukázce se změnou pozadí od Dana Vítka: http://www.itnetwork.cz/…zmena-pozadi

Odpovědět 3.4.2013 16:59
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
Odpovídá na Anonym
Michal Žůrek - misaz:3.4.2013 18:02

A jak bys to prosímtě chtěl dělat? PHP?

 
Odpovědět 3.4.2013 18:02
Avatar
Anonym
Člen
Avatar
Odpovídá na Michal Žůrek - misaz
Anonym:3.4.2013 18:03

ne, tak blbej nejsem -_- jenom že se musím trošku doučit css a pak java script -_-

 
Odpovědět 3.4.2013 18:03
Avatar
Michal Žůrek - misaz:3.4.2013 18:10

PHP, ale není špatně... V něm by to šlo skvěle...

 
Odpovědět 3.4.2013 18:10
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 8 zpráv z 8.