Jaro - změna CSS pomocí JavaScriptu

JavaScript Základní konstrukce Zdrojákoviště 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ženo 382x (708.45 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

 

  Aktivity (1)

Program pro vás napsal Vojtěch Mašek (Woyta)
Avatar
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.

Jak se ti líbí článek?
Celkem (5 hlasů) :
4.64.64.64.64.6


 



 

 

Komentáře

Avatar
Michal Žůrek (misaz):

:D Dobré to máš.

Odpovědět 29.3.2013 23:09
Nesnáším {}, proto se jim vyhýbám.
Avatar
Anonym
Člen
Avatar
Anonym:

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

javascriptem

var datum = new Date()

pak si to rozložíš

Odpovědět 31.3.2013 17:55
Nesnáším {}, proto se jim vyhýbám.
Avatar
Anonym
Člen
Avatar
Odpovídá na Michal Žůrek (misaz)
Anonym:

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
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Anonym
David Čápka:

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
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Odpovídá na Anonym
Michal Žůrek (misaz):

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

Odpovědět 3.4.2013 18:02
Nesnáším {}, proto se jim vyhýbám.
Avatar
Anonym
Člen
Avatar
Odpovídá na Michal Žůrek (misaz)
Anonym:

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

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

Odpovědět 3.4.2013 18:10
Nesnáším {}, proto se jim vyhýbám.
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.