Toto je ich hlavný skript:
200?"200px":""+(this.scrollHeight+5)+"px");"> 00:00:00
Úplne hore vidíme:
200?"200px":""+(this.scrollHeight+5)+"px");"> 00:00:00
Stačí pridať miniatúra a žltý odtieň a šípky.
200?"200px":""+(this.scrollHeight+5)+"px");"> « 00:00:00»
A tu je to, čo sa stalo:
Takže môžete sami vidieť, ako sa všetko zmenilo, a teraz môžete robiť všetko sami a krásne si to nastaviť tak, aby vyhovovalo vašim štýlom. Čo iní nedokážu, keďže tu je Flash, že tu nie sú.
Teraz navyše hodiny na Flash
200?"200px":""+(this.scrollHeight+5)+"px");">
Môžete si teda vybrať, ktoré sa vám najviac páčia a vložiť ich, pretože niektoré sa dajú nainštalovať do bloku, ale tie prvé sa vám páčia viac, pretože sú flexibilné a prispôsobiteľné, čo zvládne každý.
O vytvorení analógových hodín sme už diskutovali 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ť- nová vlastnosť CSS 3, ktorá umožňuje rotáciu 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 je možné vykonať pomocou niektorých JavaScript knižnice(napr. jQuery). Samozrejme s jQuery môžete oživiť zmenu oveľa viac CSS vlastnosti než s prechod. Ale jQuery je vložený CSS nástroj, JavaScript knižnice sú externé nástroje, ktoré môžu alebo 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 formát PNG s transparentnosťou.
Archivovať s zdrojový kód vrátane ukážok 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; pozadie: url(ciferník.jpg); štýl zoznamu: žiadny; ) #sec, #min, #hour ( 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; ) #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 získa relatívne umiestnenie, ktoré vám umožňuje používať absolútne umiestnenie pre šípky v ňom umiestnené.
CSS3 sa použije s malým kódom jQuery.
JavaScript
- Získavanie času
- Vypočítajte a vložte css štýly(uhol natočenia) pre každý prvok.
- 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
Môžete získať čas od pomocou PHP kód, ale bude to trvať server. 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 otoč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 štýlov:
#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 = new Date().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 Funkcia 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 ukazuje praktické využitie vlastnosti točiť sa nesúvisiace s dizajnom.
Poď robiť Digitálne hodinky s použitím dátumu a času 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 so zmyslom aktuálny dátum a aktuálny čas 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. Toto je š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).
Ide o jednoduchý skript, ktorý zobrazuje systémový čas v JavaScripte vo forme obyčajného textu. 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á.