elektronické hodiny jQuery. Analógové hodiny využívajúce CSS3. Dávať to všetko dokopy

O vytvorení analógových hodín sme už diskutovali s pomocou CSS a JavaScript. V tomto návode vytvoríme rovnaké hodiny pomocou CSS3, aby sme videli, ako na to nový štandard mení prístup k rozvoju rôznych efektov. Ukážka tohto návodu bude fungovať iba v prehliadačoch, ktoré podporujú vlastnosť CSS3 točiť sa(v IE6 demo NEFUNGUJE).

CSS3 Transform:rotate

Transformácia: otočiť je nová vlastnosť v CSS 3, ktorá umožňuje otáčať rôzne prvky. Pomocou transformácií môžete tiež meniť mierku prvkov, zavádzať deformácie horizontálne a vertikálne a presúvať prvky po webovej stránke. To všetko je možné animovať pomocou vlastnosti prechod(S odlišné typy prechody a trvanie).

Rovnaké akcie pre animáciu prvkov stránky možno vykonať pomocou niektorej knižnice JavaScript (napríklad jQuery). Samozrejme, s jQuery môžete animovať oveľa viac zmien. CSS vlastnosti než s prechod. Ale jQuery je vstavaný nástroj CSS, knižnice JavaScript sú externé nástroje, ktoré môžu, ale nemusia byť dostupné. V každom prípade CSS3 otvára nové sľubné smery vývoja vývojárov.

Grafické umenie

Najprv musíte urobiť GUI celé hodiny. Budeme mať základňu a tri šípky. Všetky pohyblivé časti sú vo Photoshope rozrezané na 600 pixelov na výšku a 30 pixelov na šírku a sú umiestnené vertikálne a predvolená vlastnosť je točiť sa otočí prvok okolo stredu. Nehnuteľnosť môžete využívať transformovať-pôvod na nastavenie stredu otáčania do iného bodu.

Ako základ hodín je možné použiť akýkoľvek obrázok. Pohyblivé časti sú obrázky PNG s priehľadnosťou.

Zahrnuté v archíve zdrojov ukážky súbor PSD, ktorý obsahuje všetky obrázky.


HTML značky

Označenie hodín je jednoduchý neusporiadaný zoznam. Každý prvok zoznamu obsahuje pohyblivú časť a má zodpovedajúce ID:

css

#clock ( pozícia: relatívna; šírka: 600px; výška: 600px; okraj: 20px automaticky 0 auto; background: url(clockface.jpg); list-style: none; ) #sec, #min, #hour (pozícia: absolútna ; šírka: 30px; výška: 600px; hore: 0px; vľavo: 285px; ) #sec ( pozadie: url(sechand.png); z-index: 3; ) #min ( pozadie: url(minhand.png); z -index: 2; ) #hour ( background: url(hourhand.png); z-index: 1; )

CSS je tiež celkom jednoduché. Keďže pohyblivé časti majú rovnaké rozmery a východiskové body, môžeme ich deklarovať spoločne, aby sme sa vyhli opakovaniu. Prvok ul prijíma relatívne umiestnenie, ktoré umožňuje absolútne umiestnenie šípok v ňom.

CSS3 sa použije s malým kódom jQuery.

JavaScript

  1. Získavanie času
  2. Vypočítajte a vložte css štýly(uhol natočenia) pre každý prvok.
  3. Aktualizujte štýly CSS v pravidelných intervaloch.

Treba poznamenať, že jQuery funguje skvele s novými vlastnosťami CSS3. Keďže štýly sa pridávajú dynamicky, súbor CSS je overený ako CSS2.1!

Získanie času

Čas môžete získať aj pomocou kódu PHP, ale bude to serverový čas. A JavaScript vráti miestny čas používateľa.

Informácie budeme dostávať prostredníctvom Dátum() a nastavte všetky naše premenné. Podľa toho použijeme GetSeconds(), GetMinutes() alebo GetHours() pre Dátum() na nastavenie sekúnd, minút a hodín:

var sekund = new Date().getSeconds();

Vo vyššie uvedenom riadku sa získa číslo z rozsahu od 0 do 59 a priradí sa k premennej sekúnd.

Určite uhol

Potom musíte vypočítať uhol natočenia pre každú šípku. Pre sekundovú a minútovú ručičku, ktoré majú 60 pozícií na hodinovom kruhu, musíme vydeliť 360 stupňov 60, čím dostaneme číslo 6. To znamená, že každá sekunda alebo minúta zodpovedá otočeniu o 6 stupňov. Výsledok výpočtov uložíme do inej premennej. Kód na pár sekúnd vyzerá takto:

Varsdegree = sekundy * 6;

Pre hodiny budú výpočty iné. Keďže máme ciferník s 12 polohami pre hodinovú ručičku, každá hodina zodpovedá uhlu natočenia 30 stupňov (360/12=30). Ale aj hodinová ručička musí byť v medzistavoch, to znamená, že sa musí pohybovať každú minútu. To znamená, že o 4:30 by hodinová ručička mala byť v polovici medzi 3. a 4. hodinou. Urobíme to takto:

Varhdegree = hodiny * 30 + (minúty / 2);

To znamená, že k uhlu natočenia o počet hodín pripočítame aj hodnotu vydelenia počtu minút 2 (čím dostaneme hodnotu v rozsahu od 0,5 do 29,5). Hodinová ručička bude teda „otočená“ o uhol od 0 do 30 stupňov (hodinový prírastok).

Napríklad:

2 hodiny 40 minút -> 2*30 = 60 stupňov a 40/2 = 20 stupňov. Celkom: 80 stupňov.

Dá sa predpokladať, že hodiny budú ukazovať po 12, keďže hodnota rotácie bude viac ako 360 stupňov. Ale všetko funguje skvele.

Teraz sme všetci pripravení na vloženie pravidiel CSS.

Nastavenie štýlu

Takto vyzerá pravidlo CSS3 točiť sa v šablóne so štýlmi:

#sec ( -webkit-transform: otočiť (45 stupňov); -moz-transform: otočiť (45 stupňov); )

A takto sa kód vloží pomocou jQuery:

$("#sec").css(("-moz-transform" : "rotate(45deg)", "-webkit-transform" : "rotate(45deg)"));

Jediným problémom je nastaviť výslednú hodnotu uhla v premennej "sdegree" na syntax namiesto 45 stupňov. Je potrebné vytvoriť reťazec v inej premennej rotovať a úplne nahradiť druhý argument. Páči sa ti to:

Var srotate = "rotate(" + sdegree + "deg)";

A kód jQuery bude vyzerať takto:

$("#sec").css(("-moz-transform" : srotate, "-webkit-transform" : srotate));

Dávať to všetko dokopy

Kód jQuery bude vyzerať takto:

$(document).ready(function() ( setInterval(function() ( var sekúnd = nový dátum().getSeconds(); var sdegree = sekúnd * 6; var srotate = "rotate(" + sdegree + "deg)" ; $("#sec").css(("-moz-transform" : srotate, "-webkit-transform" : srotate)); ), 1000); setInterval(function() ( var hours = new Date() .getHours(); var mins = new Date().getMinutes(); var hdegree = hodiny * 30 + (min / 2); var hrotate = "rotate(" + hdegree + "deg)"; $("#hour ").css(("-moz-transform" : hrotate, "-webkit-transform" : hrotate)); ), 1000); setInterval(function() ( var mins = new Date().getMinutes(); var mdegree = min * 6; var mrotate = "rotate(" + mdegree + "deg)"; $("#min").css(("-moz-transform" : mrotate, "-webkit-transform" : mrotate) );), 1000);));

Používame funkciu JavaScript setInterval aktualizovať štýly každú sekundu. Premenné, ktoré prijímajú časové hodnoty, sa v ňom musia aktualizovať. V opačnom prípade sa hodiny stanú zbytočným odpadkom na stránke.

Záver

Táto lekcia demonštruje praktické využitie vlastnosti točiť sa nesúvisiace s dizajnom.

Urobme si digitálne hodiny s dátumom a časom jQuery a CSS3 na malú animáciu.

HTML

Označenie je jednoduché a flexibilné. Tvoríme DIV s triedou hodiny, DIV s triedou Dátum, ktorý zobrazí dátum a neusporiadaný zoznam obsahujúci hodiny, minúty a sekundy.

css

Štýly s malou animáciou:

Kontajner (šírka: 960px; okraj: 0 automaticky; pretečenie: skryté;) .clock (šírka:800px; okraj:0 automaticky; padding:30px; okraj:1px plný #333; farba:#fff; ) #Dátum ( font- rodina: Arial, Helvetica, sans-serif; font-size:36px; text-align:center; text-shadow:0 0 5px #00c6ff; ) ul ( width:800px; margin:0 auto; padding:0px; list- style:none; text-align:center; ) ul li ( display:inline; font-size:10em; text-align:center; font-family:Arial, Helvetica, sans-serif; text-shadow:0 0 5px # 00c6ff; ) #point ( position:relative; -moz-animation:mymove 1s easy infinite; -webkit-animation:mymove 1s easy infinite; padding-left:10px; padding-right:10px; ) @-webkit-keyframes mymove ( 0 % (opacity: 1,0; text-shadow: 0 0 20px #00c6ff;) 50 % (opacity:0; text-shadow:none; ) 100 % (opacity:1,0; text-shadow:0 0 20px #00c6ff; ) ) @-moz-keyframes mymove ( 0 % (opacity:1.0; text-shadow:0 0 20px #00c6ff;) 50 % (opacity:0; text-shadow:none; ) 100 % (opacity:1.0; text-shadow :0 0 20px #00c6ff; ) )

JS

Spájame sa jQuery knižnica

A potom náš scenár

  • nový dátum()- vytvorí nový objekt Dátum s hodnotou aktuálneho dátumu a aktuálneho času v prehliadači počítača.
  • setDate()- metóda nastavuje deň v mesiaci (od 1 do 31), miestny čas
  • getDate()- metóda vráti deň v mesiaci (od 1 do 31) pre zadaný dátum podľa miestneho času
  • getSeconds(), getMinutes() a getHours()- tieto metódy vám umožňujú získať sekundy, minúty a hodiny aktuálneho času v prehliadači.
  • (sekundy< 10 ? "0" : "") + seconds) - pridá úvodnú nulu k hodnote sekúnd (minút a hodín). Symboly ? a : zahŕňajú trojčlenné ( trojčlenný) operátor. to špeciálny operátor, ktorý vráti hodnotu pred dvojbodkou, ak je podmienka skôr otázka (? ) správny ( pravda), alebo hodnotu po dvojbodky ak je podmienka nepravdivá ( falošný).
  • Funkcia setInterval- je štandardná javascript funkciu, nie časť jQuery. Spustí kód mnohokrát, v pravidelných intervaloch (milisekundy).

Toto je jednoduchý skript, ktorý ukazuje systémový čas na JavaScript je jednoduchý text. Hodiny, minúty a sekundy oddelené dvojbodkou – a je to.

Pre nastavenie vlastného štýlu hodín stačí definovať štýl bloku s ID – #time . V CSS si môžete nastaviť písmo pre hodiny, ich farbu a veľkosť. Ak nepotrebujete jednoduché hodiny, ale zložitejšie, pozrite sa na Flash hodiny pre web. Odkiaľ skript získava časové údaje? Zobrazený čas je presne ten, ktorý je nastavený na zariadení.

Inštalácia

Vložte nasledujúci kód na miesto na stránke, kde chcete vidieť hodiny. Na uCoz to môže byť napríklad „Top“ alebo „Dolná časť webu“:

200?"200px":""+(this.scrollHeight+5)+"px");">
00:00:00

Skript okamžite zobrazí na mieste, kde ste ho nainštalovali, riadok textu s hodinami. Napríklad, "00:00:00". Mimochodom, sekundy, minúty a hodiny sú vždy dvojciferné, takže zmena hodnôt je plynulá.