Hledáme nového kolegu do redakce - 100% home office, 100% flexibilní pracovní doba. Více informací.
Využij akce až 80 % zdarma při nákupu e-learningu - více informací. Zároveň pouze tento týden sleva až 80 % na e-learning týkající se Swift
discount week 80

Jar - zmena CSS pomocou JavaScriptu

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

Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!

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


 

Stiahnuť

Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami

Stiahnuté 409x (708.45 kB)
Aplikácia je vrátane zdrojových kódov v jazyku JavaScript

 

Všetky články v sekcii
JavaScriptu zdrojákoviště - Základná konštrukcia jazyka
Program pre vás napísal Vojtěch Mašek (Woyta)
Avatar
Ako sa ti páči článok?
Ešte nikto nehodnotil, buď prvý!
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

 

 

Komentáre

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

:D Dobré to máš.

 
Odpovedať
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 :)

 
Odpovedať
31.3.2013 15:59
Avatar
Odpovedá na Anonym
Michal Žůrek - misaz:31.3.2013 17:55

javascriptem

var datum = new Date()

pak si to rozložíš

 
Odpovedať
31.3.2013 17:55
Avatar
Anonym
Člen
Avatar
Odpovedá 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

 
Odpovedať
3.4.2013 16:52
Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovedá 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

Odpovedať
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
Odpovedá na Anonym
Michal Žůrek - misaz:3.4.2013 18:02

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

 
Odpovedať
3.4.2013 18:02
Avatar
Anonym
Člen
Avatar
Odpovedá 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 -_-

 
Odpovedať
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...

 
Odpovedať
3.4.2013 18:10
Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zobrazené 8 správy z 8.