Kaip pridėti laikrodį prie html. Rankinis laikrodis naudojant CSS3

Mes jau aptarėme ciferblato laikrodžių kūrimą su naudojant CSS ir JavaScript. Šiame vadove mes sukursime tą patį laikrodį naudodami CSS3, kad pamatytume, kaip tai padaryti naujas standartas keičia požiūrį į įvairių efektų kūrimą. Šios mokymo programos demonstracinė versija veiks tik tose naršyklėse, kurios palaiko CSS3 nuosavybę pasukti(demo versija NEVEIKIA IE6).

Transformuoti: pasukti- nauja CSS 3 savybė, leidžianti pasukti įvairius elementus. Naudodami transformacijas taip pat galite keisti elementų mastelį, įvesti horizontalius ir vertikalius iškraipymus ir perkelti elementus tinklalapyje. Visa tai galima animuoti naudojant nuosavybę perėjimas(Su skirtingų tipų perėjimai ir trukmė).

Tuos pačius veiksmus animuojant puslapio elementus galima atlikti naudojant tam tikrą JavaScript biblioteką (pavyzdžiui, jQuery). Žinoma, su naudojant jQuery galite pagyvinti pasikeitimą daug daugiau CSS savybės nei naudojant perėjimas. Tačiau „jQuery“ yra integruotas CSS įrankis, „JavaScript“ bibliotekos yra išoriniai įrankiai, kurių gali nebūti. Bet kuriuo atveju CSS3 atveria naujas perspektyvias kūrėjo plėtros kryptis.

Pirmiausia turime padaryti GUI laikrodžiams. Turėsime pagrindą ir tris strėles. Visos judančios dalys supjaustomos „Photoshop“ iki 600 piks. aukščio ir 30 piks. pločio matmenų ir yra vertikaliai, o pagal numatytuosius nustatymus pasukti sukasi elementą aplink centrą. Galite naudotis turtu transformacija-kilmė norėdami nustatyti sukimosi centrą į kitą tašką.

Laikrodžio pagrindui galite naudoti bet kokį jums patinkantį vaizdą. Judančios dalys yra vaizdai PNG formatu su skaidrumu.

Archyvuota su šaltinio kodasįtrauktos demonstracinės versijos PSD failas, kuriame yra visi vaizdai.

Laikrodžio išdėstymas yra paprastas netvarkingas sąrašas. Kiekviename sąrašo elemente yra judanti dalis ir atitinkamas ID:

#laikrodis ( padėtis: santykinis; plotis: 600 pikselių; aukštis: 600 pikselių; paraštė: 20 pikselių automatinis 0 automatinis; fonas: url(clockface.jpg); sąrašo stilius: nėra; ) #sec, #min, #hour (pozicija: absoliuti plotis: 30px: 0px: z -index: 2;

CSS taip pat yra gana paprasta. Kadangi judančios dalys turi tie patys dydžiai ir atspirties taškai, tada galime juos paskelbti kartu, kad išvengtume pasikartojimo. Elementas ul gauna santykinį padėties nustatymą, kuris leidžia absoliučiai nustatyti jame esančių rodyklių padėtį.

CSS3 bus taikomas naudojant mažas kodas jQuery.

Reikėtų pažymėti, kad jQuery puikiai veikia su naujomis CSS3 savybėmis. Be to, kadangi stiliai pridedami dinamiškai, CSS failas patvirtinamas kaip CSS2.1!

Laiką taip pat galima gauti naudojant PHP kodą, tačiau tai bus serverio laikas. Ir JavaScript grąžina vartotojo vietinį laiką.

Informaciją gausime naudodamiesi Data () ir nustatykite visus mūsų kintamuosius. Mes atitinkamai naudosime GetSeconds (), GetMinutes () arba Gauti valandas () Už Data () norėdami nustatyti atitinkamai sekundes, minutes ir valandas:

Var seconds = new Date().getSeconds();

Aukščiau pateiktoje eilutėje bus gautas skaičius nuo 0 iki 59 ir priskirtas kintamajam sekundžių.

Tada reikia apskaičiuoti kiekvienos rodyklės sukimosi kampą. Antrosios ir minutinės rodyklėms, turinčioms 60 pozicijų valandų apskritime, 360 laipsnių reikia padalyti iš 60, o tai suteikia mums skaičių 6. Tai reiškia, kad kiekviena sekundė ar minutė atitinka 6 laipsnių pasukimą. Skaičiavimų rezultatą išsaugosime kitame kintamajame. Per kelias sekundes kodas atrodo taip:

Var laipsnis = sekundės * 6;

Valandoms skaičiavimai skirsis. Kadangi turime ciferblatą su 12 padėčių valandų rodyklėms, kiekviena valanda atitinka 30 laipsnių sukimosi kampą (360/12=30). Tačiau valandos rodyklė taip pat turi būti tarpinėse būsenose, tai yra, ji turi judėti kas minutę. Tai yra, 4:30 valandinė rodyklė turėtų būti pusiaukelėje tarp 3 ir 4 valandos. Štai kaip tai padarysime:

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

Tai reiškia, kad prie sukimosi kampo prie valandų skaičiaus pridedame minučių skaičių padalijus iš 2 (tai duos mums vertę nuo 0,5 iki 29,5). Taigi, valandų rodyklė bus „pasukusi“ kampu nuo 0 iki 30 laipsnių (valandos žingsniu).

Pavyzdžiui:

2 valandos 40 minučių -> 2*30 = 60 laipsnių ir 40/2 = 20 laipsnių. Iš viso: 80 laipsnių.

Galima daryti prielaidą, kad laikrodis parodys, kas ką žino, po 12, nes sukimosi vertė bus didesnė nei 360 laipsnių. Bet viskas veikia gerai.

Dabar esame pasirengę įterpti CSS taisykles.

Taip atrodo CSS3 taisyklė pasukti stiliaus lape:

#sec ( -webkit-transform: rotate (45deg); -moz-transform: rotate (45deg); )

Štai kaip kodas bus įterptas naudojant jQuery:

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

Vienintelė problema yra nustatyti gautą kampo reikšmę sintaksės kintamajame "sdegree", o ne 45 laipsnių. Reikia sukurti eilutę kitame kintamajame pasukti ir visiškai pakeisti antrąjį argumentą. kaip tai:

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

A jQuery kodas atrodys taip:

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

„jQuery“ kodas atrodys taip:

$(document).ready(function() ( setInterval(function() ( var seconds = new Date().getSeconds(); var sdegree = sekundės * 6; var srotate = "rotate(" + sdegree + "deg)") ; $("#sec").css(("-moz-transform" : srotate, "-webkit-transform" : srotate)), 1000 setInterval(function() ( var valandos = new Date()); .getHours(); var mins = new Date().getMinutes(); ("-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) );

Mes naudojame JavaScript funkcija setInterval kas sekundę atnaujinti stilius. Jame turi būti atnaujinti kintamieji, kurie gauna laiko reikšmes. Priešingu atveju laikrodis taps nenaudingu šlamštu puslapyje.

Ši pamoka demonstruoja praktinį nuosavybės pritaikymą pasukti nesusijęs su dizainu.

Padarykime elektroninį laikrodį su data ir laiku naudodami jQuery ir CSS3 nedidelei animacijai.

Žymėjimas yra paprastas ir lankstus. Sukurkite DIV su klase, pavadinta laikrodis , DIV su klase Data, kuri parodys datą ir nesutvarkytą sąrašą su valandomis, minutėmis ir sekundėmis.

Dizaino stiliai su maža animacija:

Konteineris (plotis: 960 piks.; paraštė: 0 automatinis; perpildymas: paslėptas;) .clock (plotis: 800 piks.; paraštė: 0 automatinis; užpildymas: 30 piks.; kraštinė: 1 piks. vientisas #333; spalva: #fff; ) #Data ( šriftas- šeima: Arial, Helvetica, teksto lygiavimas: centre: 0 5 piks. :centre santykinai: -moz-animation:mymove 1s easy begalinis -shadow:0 0 20px #00c6ff;) 50% (nepermatomumas:0; text-shadow:none; ) 100% (nepermatomumas:1.0; text-shadow:0 0 20px #00c6ff; ) ) @-moz-keyframes mymove ( 0% (nepermatomumas: 1,0; teksto šešėlis: 0 0 20 piks. # 00c6ff;) 50% (nepermatomumas: 0; teksto šešėlis: nėra; ) 100% (nepermatomumas: 1,0; teksto šešėlis: 0 0 20 piks. # 00c6ff; ) )

„jQuery“ bibliotekos prijungimas

Ir tada mūsų scenarijus $(document).ready(function() ( // Sukurkite du kintamuosius su mėnesių ir savaitės dienų pavadinimais masyve var monthNames = [ "sausis", "vasaris", "kovas", " balandis", "gegužė ", "birželis", "liepa", "rugpjūtis", "rugsėjis", "spalis", "lapkritis", "gruodis" ]; var dayNames= ["sekmadienis", "pirmadienis", "antradienis" ", "Trečiadienis" "Ketvirtadienis","Penktadienis","Šeštadienis"] // Sukurti objektą newDate() var newDate = new Date(); // Gauti dabartinę datą iš Date objekto newDate.setDate(newDate. getDate()); // Išvesties diena, data, mėnuo ir metai $("#Date").html(dayNames + " " + newDate.getDate() + " " + monthNames + " " + newDate.getFullYear()) setInterval(function() ( / / Sukurkite newDate() objektą ir gaukite dabartinio laiko sekundes var seconds = new Date().getSeconds(); // Pridėkite nulį prie sekundžių reikšmės $("#sec" ").html((sekundės< 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() – sukuria naują Datos objektą su dabartinės datos ir dabartinio laiko reikšme kompiuterio naršyklėje.
• setDate() – metodas nustato mėnesio dieną (nuo 1 iki 31) pagal vietos laiką
• getDate() – metodas grąžina mėnesio dieną (nuo 1 iki 31) nurodytai datai pagal vietos laiką
• getSeconds(), getMinutes() ir getHours() – šie metodai leidžia nuskaityti naršyklės dabartinio laiko sekundes, minutes ir valandas.
• (sekundės< 10 ? "0" : "") + seconds) - добавляет начальный ноль к значению секунд (минут и часов). Символы ? и : включают тернарный (ternary ) оператор. Это специальный оператор, который возвращает значение перед двоеточием, если условие перед вопросом (? ) верно (true ), или значение после двоеточия , если условие неверно (false ).
• Funkcija setInterval yra standartinė JavaScript funkcija, o ne jQuery dalis. Vykdo kodą daug kartų, reguliariais intervalais (milisekundėmis).

Tai yra jų pagrindinis scenarijus:

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

setInterval(funkcija () (
data = nauja Data (),
h = data.getHours(),
m = data.getMinutes(),
s = data.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);

Pačiame viršuje matome:

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

Tiesiog pridėkite paryškintą tekstą ir geltoną atspalvį bei rodykles.

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

Ir štai kas atsitiko:

Taigi galite patys pamatyti, kaip viskas pasikeitė, o dabar galite viską padaryti patys ir gražiai sutvarkyti, kad atitiktų jūsų stilių. Kad kitų negalima padaryti, nes ten įjungta „Flash“, kad jų čia nėra.

Dabar papildomai yra „Flash“ laikrodis

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

Taigi galite pasirinkti, kurie jums labiausiai patinka, ir juos įdiegti, nes kai kurie gali būti montuojami bloke, bet jums labiau patinka pirmieji, nes jie yra lankstūs ir pritaikomi, ką gali padaryti kiekvienas.

Tai paprastas scenarijus, kuris parodo sistemos laikas JavaScript paprastu tekstu. Valandos, minutės ir sekundės, atskirtos dvitaškiu – viskas.

Norint nustatyti savo laikrodžio stilių, pakanka apibrėžti bloko stilių su ID - #time. CSS galite nustatyti savo laikrodžio šriftą, jo spalvą ir dydį. Jei jums reikia ne paprasto, o sudėtingesnio laikrodžio, pažiūrėkite į svetainės „Flash“ laikrodžius. Iš kur scenarijus gauna laiko duomenis? Rodomas laikas tiksliai atitinka įrenginyje nustatytą laiką.

Įklijuokite šį kodą į svetainės vietą, kurioje norite matyti laikrodį. „uCoz“ tai gali būti, pavyzdžiui, „Viršus“ arba „Svetainės apačia“:

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

setInterval(funkcija () (
data = nauja Data (),
h = data.getHours(),
m = data.getMinutes(),
s = data.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);

Scenarijus iš karto parodys teksto eilutę su laikrodžiu toje vietoje, kur jį įdiegėte. Pavyzdžiui, „00:00:00“. Beje, sekundės, minutės ir valandos visada yra dviženklės, todėl reikšmės keičiasi sklandžiai.