ako pridať hodiny do html. Ručné hodiny pomocou CSS3

O tvorbe ciferníkový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 otáčať(ukážka NEFUNGUJE v IE6).

Transformácia: otočiť- nová vlastnosť CSS 3, ktorá umožňuje otáčať rôzne prvky. Pomocou transformácií môžete tiež zmeniť mierku prvkov, zaviesť horizontálne a vertikálne deformácie a presúvať prvky po webovej stránke. To všetko je možné pomocou nehnuteľnosti animovať prechod(S rôzne 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 pomocou jQuery môžete oživiť zmenu oveľa viac CSS vlastnosti než používať prechod. Ale jQuery je vstavaný nástroj CSS, knižnice JavaScript sú externé nástroje, ktoré nemusia byť dostupné. V každom prípade CSS3 otvára nové sľubné smery vývoja vývojárov.

Najprv musíme urobiť GUI pre hodinky. Budeme mať základňu a tri šípky. Všetky pohyblivé časti sú vo Photoshope vyrezané na rozmery 600 pixelov na výšku a 30 pixelov na šírku a sú umiestnené vertikálne a predvolene majú vlastnosť otáčať otočí prvok okolo stredu. Nehnuteľnosť môžete využívať transformovať-pôvod aby ste nastavili stred otáčania na iný bod.

Na základňu hodín môžete použiť ľubovoľný obrázok. Pohyblivé časti sú obrázky formát PNG s transparentnosťou.

Archivované s zdrojový kód vrátane ukážok súbor PSD, ktorý obsahuje všetky obrázky.

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

#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; hore: 0px; z -index: 2;

CSS je tiež celkom jednoduché. Keďže pohyblivé časti majú rovnaké veľkosti a východiskové body, potom ich môžeme deklarovať spoločne, aby sme sa vyhli opakovaniu. Prvok ul prijíma relatívnu polohu, ktorá umožňuje absolútne umiestnenie šípok, ktoré sa v nej nachádzajú.

CSS3 sa použije pomocou malý kód jQuery.

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

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

Informácie dostaneme pomocou 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 sekundy = 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.

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:

Stupeň var = sekundy * 6;

Po celé 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:

Var hdegree = hodiny * 30 + (min / 2);

To znamená, že k uhlu natočenia o počet hodín pripočítame hodnotu vydelenia počtu minút číslom 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.

Môžeme predpokladať, že hodiny ukážu ktovie čo po 12, keďže hodnota rotácie bude viac ako 360 stupňov. Ale všetko funguje skvele.

Teraz sme pripravení vložiť pravidlá CSS.

Takto vyzerá pravidlo CSS3 otáčať v šablóne štýlov:

#sec ( -webkit-transform: Rotation(45deg); -moz-transform: Rotation(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" v syntaxi namiesto 45 stupňov. Je potrebné vytvoriť reťazec v inej premennej rotovať a úplne nahradiť druhý argument. takto:

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

A kód jQuery bude vyzerať takto:

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

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); ("-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) );

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 odpadom na stránke.

Táto lekcia demonštruje praktické využitie vlastnosti otáčať nesúvisí s dizajnom.

Urobme si elektronické hodiny s dátumom a časom pomocou jQuery a CSS3 pre malú animáciu.

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

Štýly dizajnu 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; text-shadow:0 0 5px #00c6ff; :center li ( display:inline; font-size:10em; text-align:center; font-family:Arial, Helvetica, sans-serif; text-shadow:0 0 5px # 00c6ff; ) #point ( position: relatívna -moz-animation:mymove 1s easy infinite:mymove 1s padding-left:10px ) @-webkit-keyframes mymove ( 0 %; -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; ) )

Pripojenie knižnice jQuery

A potom náš skript $(document).ready(function() ( // Vytvorenie dvoch premenných s názvami mesiacov a dní v týždni v poli var monthNames = [ "Január", "Február", "Marec", " apríl", "máj", "jún", "júl", "august", "september", "október", "november", "december" ]; var dayNames= ["nedeľa", "pondelok", "utorok" ", "Streda" ,"Thursday","Friday","Saturday"] // Vytvorenie objektu newDate() var newDate = new Date(); // Získanie aktuálneho dátumu z objektu Date newDate.setDate(newDate. getDate() deň, dátum, mesiac a rok $("#Date").html(dayNames + " " + newDate.getDate() + " " + monthNames + " " + newDate.getFullYear()); function() ( / / Vytvorenie objektu newDate() a načítanie sekúnd aktuálneho času var sekund = new Date().getSeconds(); // Pridanie úvodnej nuly k hodnote sekúnd $("#sec"). html((sekundy< 10 ? "0" : "") + seconds); },1000); setInterval(function() { // Создаем объект newDate() и извлекаем минуты текущего времени var minutes = new Date().getMinutes(); // Добавляем начальный ноль к значению минут $("#min").html((minutes < 10 ? "0" : "") + minutes); },1000); setInterval(function() { // Создаем объект newDate() и извлекаем часы из текущего времени var hours = new Date().getHours(); // Добавляем начальный ноль к значению часов $("#hours").html((hours < 10 ? "0" : "") + hours); }, 1000); });

• new Date() - vytvorí nový objekt Date 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) podľa miestneho času
• 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) - добавляет начальный ноль к значению секунд (минут и часов). Символы ? и : включают тернарный (ternary ) оператор. Это специальный оператор, который возвращает значение перед двоеточием, если условие перед вопросом (? ) верно (true ), или значение после двоеточия , если условие неверно (false ).
• Funkcia setInterval je štandardná funkcia JavaScript, nie je súčasťou jQuery. Spustí kód mnohokrát, v pravidelných intervaloch (milisekundy).

Toto je ich hlavný skript:

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

setInterval(funkcia () (
dátum = nový dátum(),
h = date.getHours(),
m = date.getMinutes(),
s = date.getSeconds(),
h = (h< 10) ? "0" + h: h,
m = (m< 10) ? "0" + m: m,
s = (s< 10) ? "0" + s: s,
document.getElementById("time").innerHTML = h + ":" + m + ":" + s;
}, 1000);

Úplne hore vidíme:

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

Stačí pridať tučný text a žltý odtieň a šípky.

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

A toto sa stalo:

Takže môžete sami vidieť, ako sa všetko zmenilo, a teraz môžete urobiť všetko sami a krásne si to zariadiť tak, aby vyhovovalo vašim štýlom. Že iné sa nedajú urobiť, keďže je tam zapnutý Flash, že tu nie sú.

Teraz sú navyše na Flashi hodiny

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

Môžete si teda vybrať, ktoré sa vám najviac páčia, a nainštalovať si ich, pretože niektoré sa dajú nainštalovať do bloku, no vám sa viac páčia tie prvé, pretože sú flexibilné a prispôsobiteľné, čo môže urobiť každý.

Toto je jednoduchý skript, ktorý ukazuje systémový čas v JavaScripte v čistom texte. Hodiny, minúty a sekundy oddelené dvojbodkou – to je všetko.

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

Prilepte nasledujúci kód na miesto, kde chcete vidieť hodiny na vašom webe. Na uCoz to môže byť napríklad „Horná časť“ alebo „Spodná časť stránky“:

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

setInterval(funkcia () (
dátum = nový dátum(),
h = date.getHours(),
m = date.getMinutes(),
s = date.getSeconds(),
h = (h< 10) ? "0" + h: h,
m = (m< 10) ? "0" + m: m,
s = (s< 10) ? "0" + s: s,
document.getElementById("time").innerHTML = h + ":" + m + ":" + s;
}, 1000);

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