Jedná sa o jednoduchý skript, ktorý zobrazuje systémový čas v jazyku JavaScript v obyčajnom texte. Hodiny, minúty a sekundy oddelené dvojbodkou - to je všetko.
Aby ste mohli nastaviť vlastný štýl hodín, stačí definovať štýl bloku s ID - #čas. V CSS si môžete nastaviť vlastné písmo pre hodiny, jeho farbu a veľkosť. Ak nepotrebujete jednoduché hodiny, ale zložitejšie hodiny, navštívte stránku s hodinami Flash. Odkiaľ skript získava časové údaje? Zobrazený čas je presne ten, ktorý je nastavený na zariadení.
Inštalácia
Nasledujúci kód prilepte na ľubovoľné miesto, kde chcete na stránke vidieť hodiny. Na uCoz to môže byť napríklad „hore“ alebo „v spodnej časti stránky“:
200? "200 pixelov": "" + (this.scrollHeight + 5) + "px"); ">
00:00:00
Skript sa okamžite zobrazí na mieste, kde ste ho nainštalovali, riadok textu s hodinami. Napríklad, "00:00:00"... Sekundy, minúty a hodiny, mimochodom, sú vždy dvojciferné, takže zmena hodnôt je plynulá.
Vytvorme elektronické hodiny s použitím dátumu a času jQuery a CSS3 za malú animáciu.
Html
Znač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: 960 pixelov; okraj: 0 auto; pretečenie: skryté;). Hodiny (šírka: 800 pixelov; okraj: 0 auto; polstrovanie: 30 pixelov; orámovanie: 1 pixel plný #333; farba: #fff;) #Date (font- rodina: Arial, Helvetica, bezpatkové; veľkosť písma: 36 pixelov; zarovnanie textu: stred; textový tieň: 0 0 5 pixelov # 00c6ff;) ul (šírka: 800 pixelov; okraj: 0 automaticky; polstrovanie: 0 pixelov; zoznam- štýl: žiadny; zarovnanie textu: stred;) ul li (zobrazenie: inline; veľkosť písma: 10em; zarovnanie textu: stred; rodina písem: Arial, Helvetica, bezpatkové; tieň textu: 0 0 5 pixelov # 00c6ff;) #point (poloha: relatívna; -moz-animácia: mymove 1s uľahčuje nekonečno; -webkit-animácia: mymove 1s uľahčuje nekonečno; padding-left: 10px; padding-right: 10px;) @ -webkit-keyframes mymove ( 0% (nepriehľadnosť: 1,0; textový tieň: 0 0 20 pixelov # 00c6ff;) 50% (krytie: 0; textový tieň: žiadny;) 100% (krycia schopnosť: 1,0; textový tieň: 0 0 20 pixelov # 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 ()- vytvára nový objekt Dátum s hodnotou aktuálneho dátumu a aktuálneho času v počítačovom prehliadači.
- setDate ()- metóda určuje deň v mesiaci (od 1 do 31) podľa miestneho času
- getDate ()- metóda vráti deň v mesiaci (od 1 do 31) pre určený dátum podľa miestneho času
- getSeconds (), getMinutes () a getHours ()- tieto metódy vám umožňujú načítať do prehliadača sekundy, minúty a hodiny aktuálneho času.
- (sekundy< 10 ? "0" : "") + seconds) - pridá počiatočnú nulu k hodnote sekúnd (minúty a hodiny). Symboly ? a : zahrnúť ternárne ( ternárny) operátor. Toto je špeciálny operátor, ktorý vráti hodnotu pred dvojbodkou, ak je podmienka predtým otázka (? ) správny ( pravda) alebo hodnotu za dvojbodka ak je podmienka nepravdivá ( falošný).
- Funkcia setInterval je štandardom javascript funkcia, nie časť jQuery... Vykonáva kód mnohokrát, v pravidelných intervaloch (milisekundy).
Toto je ich hlavný scenár:
200? "200 pixelov": "" + (this.scrollHeight + 5) + "px"); "> 00:00:00
Úplne hore vidíme:
200? "200 pixelov": "" + (this.scrollHeight + 5) + "px"); "> 00:00:00
Stačí pridať tučný text a žltý odtieň a šípky.
200? "200 pixelov": "" + (this.scrollHeight + 5) + "px"); "> « 00:00:00»
A tu je to, čo sa stalo:
Sami vidíte, ako sa všetko zmenilo, a teraz môžete všetko robiť sami a krásne nastaviť tak, aby zodpovedalo vašim štýlom. Že ostatných nemožno robiť, pretože existuje Flash, že tu nie sú.
Teraz okrem hodín na Flashi
200? "200 pixelov": "" + (this.scrollHeight + 5) + "px"); ">
Môžete si teda vybrať, ktoré sa vám najviac páčia, a dať ich, pretože niektoré je možné nainštalovať do bloku, ale prvé sa vám páčia viac, pretože sú flexibilné a prispôsobiteľné, čo zvládne každý.
Už sme sa zaoberali vytváraním analógových hodín pomocou CSS a JavaScript. V tomto tutoriáli vyrobíme rovnaké hodiny pomocou CSS3, aby sme zistili, ako nový štandard mení spôsob, akým navrhujeme rôzne efekty. Ukážka tohto tutoriálu bude fungovať iba v prehliadačoch, ktoré podporujú vlastnosť CSS3 točiť sa(demo v IE6 NEFUNGUJE).
Transformácia CSS3: otočenie
Transformovať: otáčať- nová vlastnosť CSS 3, ktorá vám umožňuje otáčať rôzne prvky. Pomocou transformácií môžete tiež meniť mierku prvkov, vytvárať 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 rôznymi druhmi prechodov a trvaním).
Rovnaké kroky pre animáciu prvkov stránky je možné vykonať pomocou knižnice JavaScript (napríklad jQuery). S jQuery môžete samozrejme animovať oveľa viac vlastností CSS, než s ktorými môžete prechod... JQuery je však vstavaný nástroj CSS, knižnice JavaScript sú externé nástroje, ktoré nemusia byť k dispozícii. V každom prípade CSS3 otvára nové sľubné smery pre vývoj vývojárov.
Grafika
Najprv musíte vytvoriť grafické rozhranie pre hodiny. Budeme mať základňu a tri šípky. Všetky pohyblivé časti sú vo Photoshope nakrájané na 600 pixlov na výšku a 30 pixelov na šírku a sú umiestnené zvisle a v predvolenom nastavení sú vlastnosti točiť sa otáča prvok okolo stredu. Nehnuteľnosť môžete užívať transformačný pôvod aby sa stred otáčania nastavil na iný bod.
Ako základ hodín je možné použiť ľubovoľný obrázok. Pohyblivé časti sú obrázky PNG s priehľadnosťou.
Archív zdrojového kódu demo obsahuje súbor PSD, ktorý obsahuje všetky obrázky.
HTML značenie
Značky pre hodiny sú jednoduchý neusporiadaný zoznam. Každý prvok v zozname obsahuje pohyblivú časť a má zodpovedajúce ID:
CSS
#hodiny (poloha: relatívna; šírka: 600 pixelov; výška: 600 pixelov; okraj: 20 pixelov auto 0 auto; pozadie: adresa URL (clockface.jpg); štýl zoznamu: žiadny;) #s, #min, #hodina (poloha: 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;) #hodina (pozadie: url (hourhand.png); z-index: 1;)
CSS je tiež celkom jednoduchý. Pretože pohyblivé časti majú rovnaké rozmery a východiskové body, môžeme ich deklarovať spoločne, aby sme sa vyhli opakovaniu. Element ul dostane relatívne umiestnenie, čo umožňuje použiť absolútne umiestnenie pre šípky v ňom umiestnené.
CSS3 bude aplikovaný s malým kódom jQuery.
JavaScript
- Získame čas na hodiny
- Vypočítajte a vložte štýly CSS (uhol natočenia) pre každý prvok.
- Aktualizujte štýly CSS v pravidelných intervaloch.
Je potrebné poznamenať, že jQuery funguje skvele s novými vlastnosťami CSS3. Pretože sú štýly pridávané dynamicky, súbor CSS je validovaný ako CSS2.1!
Získame čas
Čas je možné získať aj pomocou kódu PHP, ale bude to čas servera. A JavaScript vracia miestny čas používateľa.
Informácie budeme dostávať pomocou Dátum () a nastaviť všetky naše premenné. Podľa toho použijeme GetSeconds (), GetMinutes () alebo GetHours () pre Dátum () nastaviť sekundy, minúty a hodiny:
Var sekúnd = nový dátum (). GetSeconds ();
V uvedenom riadku sa získa číslo z rozsahu od 0 do 59 a priradí sa k premennej sekúnd.
Určte uhol
Potom musíte vypočítať uhol natočenia pre každú šípku. Pre druhú a minútovú ručičku, ktoré majú 60 pozícií na hodinovom kruhu, musíme rozdeliť 360 stupňov na 60, čo nám dáva číslo 6. To znamená, že každá sekunda alebo minúta zodpovedá 6-stupňovému otočeniu. Výsledok výpočtu uložíme do inej premennej. Na niekoľko sekúnd kód vyzerá takto:
Var sdegree = sekundy * 6;
Hodiny budú výpočty odlišné. Keďže pre číselníkovú ručičku máme číselník s 12 polohami, každá hodina zodpovedá uhlu natočenia 30 stupňov (360/12 = 30). Hodinová ručička ale musí byť v medzistavoch, to znamená, že sa musí pohybovať každú minútu. To znamená, že o 4:30 by mala byť hodinová ručička na polceste medzi 3. a 4. hodinou. Postupujeme takto:
Var hdegree = hodiny * 30 + (min / 2);
To znamená, že k uhlu rotácie prirátame k počtu hodín aj hodnotu delenia počtu minút 2 (čím získame hodnotu v rozsahu od 0,5 do 29,5). Hodinová ručička sa teda „otočí“ 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ť, že po 12:00, pretože hodnota rotácie bude viac ako 360 stupňov. Ale všetko funguje dobre.
Teraz sme pripravení vložiť pravidlá CSS.
Nastavenie štýlu
Takto vyzerá pravidlo CSS3 točiť sa v šablóne so štýlmi:
#sec (-webkit-transform: rotate (45deg); -moz-transform: rotate (45deg);)
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. Potrebujete vytvoriť reťazec v inej premennej srotate a úplne nahradiť druhý argument. Páči sa ti to:
Var srotate = "otáčať (" + sdegree + "deg)";
A kód jQuery bude vyzerať takto:
$ ("# s"). 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 seconds = new Date (). getSeconds (); var sdegree = seconds * 6; var srotate = "rotate (" + sdegree + "deg)" ; $ ("# sec"). css ((""-moz-transform ": srotate," -webkit-transform ": srotate));), 1000); setInterval (function () (var hours = new Date () .getHours (); var mins = nový dátum (). getMinutes (); var hdegree = hodiny * 30 + (mins / 2); var hrotate = "rotate (" + hdegree + "deg)"; $ ("# hodina ") .css ((" -moz -transform ": hrotate," -webkit -transform ": hrotate));), 1000); setInterval (function () (var mins = new Date (). getMinutes (); var mdegree = mins * 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. V ňom musia byť aktualizované premenné, ktoré dostávajú časové hodnoty. V opačnom prípade sa hodiny stanú nepotrebným odpadkom na stránke.
Záver
Táto lekcia ukazuje praktické využitie nehnuteľnosti točiť sa nesúvisí s dizajnom.