Ora e shigjetave duke përdorur CSS3. Ora dixhitale në CSS3 dhe jQuery Si të shtoni orë në html
Ky është skenari i tyre kryesor:
200? "200px": "" + (this.scrollHeight + 5) + "px"); "\u003e 00:00:00
Në majë shohim:
200? "200px": "" + (this.scrollHeight + 5) + "px"); "\u003e 00:00:00
Thjesht shtoni tekst të trashë dhe ngjyrë të verdhë dhe shigjeta.
200? "200px": "" + (this.scrollHeight + 5) + "px"); "\u003e « 00:00:00»
Dhe kjo është ajo që ndodhi:
Kështu që ju vetë shihni se si gjithçka ka ndryshuar, dhe tani ju mund të bëni gjithçka vetë dhe ta vendosni atë bukur për t'iu përshtatur stileve tuaja. Se të tjerët nuk mund të bëhen, sepse ekziston Flash, se ata nuk janë këtu.
Tani përveç orës në Flash
200? "200px": "" + (this.scrollHeight + 5) + "px"); "\u003e
Kështu që ju mund të zgjidhni se cilat ju pëlqejnë më shumë dhe t'i vendosni ato, sepse disa mund të instalohen në bllok, por ato të parat që ju pëlqejnë më shumë, pasi ato janë fleksibile dhe të personalizueshme, të cilat të gjithë mund t'i bëjnë.
Ky është një skenar i thjeshtë që tregon kohën e sistemit në JavaScript në tekst të thjeshtë. Orë, minuta dhe sekonda të ndara nga një zorrë e trashë - kjo është e gjitha.
Në mënyrë që të vendosni stilin tuaj për orën, mjafton të përcaktoni stilin për bllokun me ID - # kohë. Në CSS mund të vendosni fontin tuaj për orën, ngjyrën dhe madhësinë e saj. Nëse nuk ju duhet një orë e thjeshtë, por më komplekse, atëherë shikoni orën Flash për sitin. Nga i merr skenari të dhënat e kohës? Koha e treguar është saktësisht ajo e vendosur në pajisje.
Instalimi
Ngjitni kodin e mëposhtëm kudo që dëshironi të shihni orën në sit. Në uCoz, kjo mund të jetë, për shembull, "Top" ose "Fund i faqes":
200? "200px": "" + (this.scrollHeight + 5) + "px"); "\u003e
00:00:00
Skenari do të tregojë menjëherë në vendin ku e keni instaluar, një rresht teksti me një orë. Për shembull, "00:00:00"... Sekondat, minutat dhe orët, nga rruga, janë gjithmonë dyshifrore, kështu që ndryshimi i vlerave është i qetë.
Ne tashmë kemi mbuluar krijimin e një ore analoge duke përdorur CSS dhe JavaScript. Në këtë manual, ne do të bëjmë të njëjtën orë duke përdorur CSS3 për të parë se si standardi i ri po ndryshon mënyrën se si ne krijojmë efekte të ndryshme. Demoja për këtë manual do të funksionojë vetëm në shfletuesit që mbështesin pronën CSS3 rrotullohen(demo NUK PUNON në IE6).
Transformimi CSS3: rrotullohuni
Transformimi: rrotullimi - një pronë e re CSS 3 që ju lejon të rrotulloni elementë të ndryshëm. Me ndihmën e transformimeve, ju gjithashtu mund të ndryshoni shkallën e elementeve, të futni shtrembërime horizontale dhe vertikale dhe të lëvizni elemente rreth faqes në internet. E gjithë kjo mund të animohet duke përdorur pronën kalim(me lloje të ndryshme të tranzicionit dhe kohëzgjatjen).
Të njëjtat hapa për animimin e elementeve të faqes mund të kryhen duke përdorur disa biblioteka JavaScript (për shembull, jQuery). Sigurisht, ju mund të gjallëroni shumë më shumë veti të CSS me jQuery sesa mundeni kalim... Por jQuery është një mjet i integruar CSS, bibliotekat JavaScript janë mjete të jashtme që mund të mos jenë të disponueshme. Në çdo rast, CSS3 hap udhëzime të reja premtuese për zhvillimin e zhvilluesve.
Grafika
Së pari, duhet të krijoni një ndërfaqe grafike për orën. Ne do të kemi një bazë dhe tre shigjeta. Të gjitha pjesët në lëvizje janë të prera në Photoshop në 600px të larta dhe 30px të gjera, dhe të pozicionuara vertikalisht, dhe si rregull prona rrotullohen rrotullon elementin rreth qendrës. Mund të përdorë pronë origjina e transformuar me qëllim që qendrën e rrotullimit ta vendosim në një pikë tjetër.
Çdo imazh mund të përdoret për bazën e orës. Pjesët në lëvizje janë imazhe PNG me transparencë.
Arkivi i kodit burimor demo përfshin një skedar PSD që përmban të gjitha imazhet.
Shënimi HTML
Paraqitja e orës është një listë e thjeshtë e pa rregulluar. Çdo artikull i listës përmban një pjesë në lëvizje dhe ka një ID përkatëse:
CSS
#clock (pozicioni: relativ; gjerësia: 600px; lartësia: 600px; margjina: 20px auto 0 automatike; sfondi: url (clockface.jpg); stili i listës: asnjë;) # sek, # min, # orë (pozicioni: absolut ; gjerësia: 30px; lartësia: 600px; maja: 0px; majtas: 285px;) #sec (sfond: url (sechand.png); z-indeks: 3;) # min (sfond: url (minhand.png); z -index: 2;) # orë (sfondi: url (hourhand.png); z-indeksi: 1;)
CSS është gjithashtu mjaft e thjeshtë. Meqenëse pjesët në lëvizje kanë të njëjtën madhësi dhe origjinë, ne mund t'i deklarojmë ato së bashku për të shmangur përsëritjen. Element ul merr pozicionim relativ, i cili lejon pozicionim absolut për shigjetat brenda tij.
CSS3 do të zbatohet me pak kod jQuery.
JavaScript
- Ne kemi kohë për orë të tëra
- Llogaritni dhe futni stilet e CSS (këndi i rrotullimit) për secilin element.
- Azhurnoni stilet e CSS në intervale të rregullta.
Duhet të theksohet se jQuery funksionon shumë mirë me vetitë e reja CSS3. Gjithashtu, meqenëse stilet shtohen në mënyrë dinamike, skedari CSS vlerësohet si CSS2.1!
Ne kemi kohë
Koha mund të merret gjithashtu duke përdorur kodin PHP, por kjo do të jetë koha e serverit. Dhe JavaScript kthen kohën lokale të përdoruesit.
Ne do të marrim informacion duke përdorur Data () dhe vendosni të gjitha ndryshoret tona. Ne do të përdorim në përputhje me rrethanat GetSeconds (), GetMinutes () ose GetHours () për Data () për të vendosur sekonda, minuta dhe orë përkatësisht:
Sekonda Var \u003d Data e re (). GetSeconds ();
Në rreshtin e mësipërm, do të merret një numër nga diapazoni nga 0 në 59 dhe do t'i caktohet një ndryshoreje sekonda.
Përcaktoni këndin
Pastaj duhet të llogaritni këndin e rrotullimit për secilën shigjetë. Për akrepat e dytë dhe minutë, të cilët kanë 60 pozicione në rrethin e orës, duhet të ndajmë 360 gradë me 60, që na jep numrin 6. Kjo do të thotë, secila sekondë ose minutë korrespondon me një rotacion prej 6 gradësh. Ne do ta ruajmë rezultatin e llogaritjes në një ndryshore tjetër. Për sekonda, kodi duket kështu:
Shkalla var \u003d sekonda * 6;
Për orë të tëra, llogaritjet do të jenë të ndryshme. Meqenëse kemi një thirrës me 12 pozicione për akrepat e orës, secila orë i përgjigjet një këndi rrotullimi prej 30 gradësh (360/12 \u003d 30). Por akrepi i orës duhet të jetë në gjendje të ndërmjetme, domethënë duhet të lëvizë me çdo minutë. Kjo është, në orën 4:30 akrepi i orës duhet të jetë në gjysmë të rrugës ndërmjet orës 3 dhe 4. Ja se si e bëjmë ne:
Var hdegree \u003d orë * 30 + (minuta / 2);
Kjo është, ne i shtojmë këndit të rrotullimit me numrin e orëve edhe vlerën e pjesëtimit të numrit të minutave me 2 (e cila do të na japë një vlerë në intervalin nga 0.5 në 29.5). Kështu, akrepi i orës do të "kthehet" me një kënd nga 0 në 30 gradë (rritje orë).
Për shembull:
2 orë 40 minuta -\u003e 2 * 30 \u003d 60 gradë dhe 40/2 \u003d 20 gradë. Gjithsej: 80 gradë.
Mund të supozohet se ora do të tregojë se pas orës 12 të mesditës, pasi vlera e rrotullimit do të jetë më shumë se 360 \u200b\u200bgradë. Por gjithçka funksionon mirë.
Tani jemi gati të fusim rregullat e CSS.
Vendosja e stilit
Kështu duket një rregull CSS3 rrotullohen në fletën e stileve:
#sec (-webkit-transformo: rrotullo (45deg); -moz-transformo: rrotullo (45deg);)
Dhe kjo është mënyra se si do të futet kodi duke përdorur jQuery:
$ ("# sek"). css (("- moz-transformo": "rrotullo (45deg)", "-webkit-transformo": "rrotullo (45deg)"));
Problemi i vetëm është të vendosni vlerën e këndit që rezulton në ndryshoren "sdegree" në sintaksë në vend të 45 gradë. Nevoja për të ndërtuar një varg në një ndryshore tjetër srotat dhe të zëvendësojë plotësisht argumentin e dytë. Si kjo:
Var srotate \u003d "rrotullo (" + shkalla + "deg)";
Dhe kodi jQuery do të duket kështu:
$ ("# sek"). css (("- moz-transformo": srotat, "-webkit-transformo": srotat));
Vendosja e të gjitha së bashku
Kodi jQuery do të dukej kështu:
$ (dokumenti). gati (funksioni () (setInterval (funksioni () (var sekonda \u003d data e re (). getSeconds (); var sdegree \u003d sekonda * 6; var srotate \u003d "rrotullohen (" + sdegree + "deg)") ; $ ("# sek"). css (("- moz-transformo": srotat, "-webkit-transformo": srotat));), 1000); setInterval (funksioni () (var ora \u003d data e re () .getHours (); var mins \u003d data e re (). getMinutes (); var hdegree \u003d orë * 30 + (minuta / 2); var hrotate \u003d "rrotullohen (" + hdegree + "deg)"; $ ("# orë ") .css ((" - moz-transformo ": hrotate," -webkit-transformo ": hrotate));), 1000); setInterval (funksioni () (var mins \u003d data e re (). getMinutes (); var mdegree \u003d minuta * 6; var mrotate \u003d "rrotulloh (" + mdegree + "deg)"; $ ("# min"). css (("- moz-transformo": mrotate, "-webkit-transformo": mrotate) );), 1000);));
Ne jemi duke përdorur funksionin JavaScript setIntervalpër të azhurnuar stilet çdo sekondë. Variablat që marrin vlera kohore duhet të azhurnohen në të. Përndryshe ora do të bëhet mbeturina e padobishme në faqe.
Përfundim
Ky mësim demonstron zbatimin praktik të pronës rrotullohen nuk ka të bëjë me dizajnin.
Le të bëjmë një orë elektronike me datë dhe orë duke përdorur jQuery dhe CSS3 për një animacion të vogël.
Html
Shënimi është i thjeshtë dhe fleksibël. Ne krijojmë DIV me klasë ora, DIV me klasë Datai cili do të shfaqë një datë dhe një listë të parenditur që përmban orë, minuta dhe sekonda.
CSS
Stilet me pak animacion:
Kontejner (gjerësia: 960px; diferencë: 0 auto; tejmbushje: e fshehur;). Orë (gjerësi: 800px; diferencë: 0 automatike; mbushje: 30px; kufi: 1px solide # 333; ngjyra: #fff;) #Date (font- familja: Arial, Helvetica, sans-serif; madhësia e shkronjave: 36px; rreshtimi i tekstit: qendra; teksti-hije: 0 0 5px # 00c6ff;) ul (gjerësia: 800px; diferencë: 0 automatike; mbushje: 0px; listë- stili: asnjë; rreshtimi i tekstit: qendra;) ul li (shfaqja: inline; madhësia e shkronjave: 10em; rreshtimi i tekstit: qendra; font-family: Arial, Helvetica, sans-serif; text-shadow: 0 0 5px # 00c6ff;) # pikë (pozicioni: relativ; -moz-animacion: mymove 1s lehtëson pafund; -webkit-animacion: mymove 1s lehtëson pafund; mbushje-majtas: 10px; mbushje-djathtas: 10px;) @ -webkit-keyframes mymove ( 0% (errësira: 1.0; teksti-hije: 0 0 20px # 00c6ff;) 50% (errësira: 0; teksti-hije: asnjë;) 100% (errësira: 1.0; teksti-hije: 0 0 20px # 00c6ff;) ) @ -moz-keyframes mymove (0% (errësira: 1,0; teksti-hije: 0 0 20px # 00c6ff;) 50% (errësira: 0; teksti-hije: asnjë;) 100% (errësira: 1,0; teksti-hije : 0 0 20px # 00c6ff;))
Js
Ne lidhemi jQuery librari
Dhe pastaj skenari ynë
- data e re () - krijon një objekt të ri Data me vlerën e datës aktuale dhe kohës aktuale në shfletuesin e kompjuterit.
- setDate () - metoda përcakton ditën e muajit (nga 1 në 31), sipas kohës lokale
- getDate () - metoda kthen ditën e muajit (nga 1 në 31) për datën e specifikuar sipas kohës lokale
- getSeconds (), getMinutes () dhe getHours () - këto metoda ju lejojnë të merrni sekonda, minuta dhe orë të kohës aktuale në shfletues.
- (sekonda< 10 ? "0" : "") + seconds) - shton një zero drejtuese të vlerës së sekondave (minutave dhe orëve). Simbolet ? dhe : përfshijnë treshe ( treshe) operatori. Ky është një operator i veçantë që kthen vlerën para zorrës së trashë nëse gjendja para një pyetje (? ) e drejtë ( e vertete), ose vlera pas dy pikanëse kushti nuk është i vërtetë ( i rremë).
- Funksioni setInterval është standardi javascript funksion, jo pjesë jQuery... Ekzekuton kodin shumë herë, në intervale të rregullta (milisekonda).