Već smo razgovarali o stvaranju satova s brojčanikom koristeći CSS i JavaScript. U ovom vodiču napravit ćemo isti sat koristeći CSS3 da vidimo kako novi standard mijenja pristup razvijanju raznih učinaka. Demo za ovaj vodič radit će samo u preglednicima koji podržavaju svojstvo CSS3 rotirati(demo NE RADI u IE6).
Transformacija: rotacija- novo svojstvo CSS 3 koje vam omogućuje rotiranje različitih elemenata. Korištenjem transformacija također možete promijeniti mjerilo elemenata, unijeti vodoravna i okomita izobličenja i pomicati elemente po web stranici. Sve se to može animirati korištenjem nekretnine tranzicija(S različiti tipovi prijelazi i trajanje).
Iste akcije za animiranje elemenata stranice mogu se izvesti pomoću neke JavaScript biblioteke (na primjer, jQuery). Naravno, s jQueryjem možete mnogo više animirati promjenu više CSS svojstva nego korištenjem tranzicija. Ali jQuery je ugrađeni CSS alat, JavaScript biblioteke vanjski su alati koji možda neće biti dostupni. U svakom slučaju, CSS3 otvara nove obećavajuće smjerove za razvoj programera.
Grafička umjetnostPrvo moramo učiniti GUI za satove. Imat ćemo bazu i tri strijele. Svi pokretni dijelovi izrezani su u Photoshopu na dimenzije od 600px visine i 30px širine, te su postavljeni okomito, a prema zadanim postavkama svojstvo rotirati rotira element oko središta. Možete koristiti posjed transformirati-podrijetlo kako biste središte rotacije postavili na drugu točku.
Za bazu sata možete koristiti bilo koju sliku koju želite. Pokretni dijelovi su slike PNG format s transparentnošću.
Arhivirano sa izvorni kod uključene demonstracije PSD datoteka, koji sadrži sve slike.
Oznake sata - jednostavne nesređeni popis. Svaki element popisa sadrži pokretni dio i ima odgovarajući ID:
CSS#clock ( pozicija: relativna; širina: 600px; visina: 600px; margina: 20px auto 0 auto; pozadina: url(clockface.jpg); list-style: ništa; ) #sec, #min, #hour ( pozicija: apsolutna ; širina: 30px; visina: 600px; gore: 0px; lijevo: 285px; ) #sec ( pozadina: url(sechand.png); z-index: 3; ) #min ( pozadina: url(minhand.png); z -index: 2; ) #hour ( pozadina: url(hourhand.png); z-index: 1; )
CSS je također vrlo jednostavan. Budući da pokretni dijelovi imaju iste dimenzije i početne točke, možemo ih deklarirati zajedno kako bismo izbjegli ponavljanje. Element ul dobiva relativno pozicioniranje, što omogućuje apsolutno pozicioniranje za strelice unutar njega.
CSS3 će se primijeniti pomoću malog jQuery koda.
JavaScriptTreba napomenuti da jQuery odlično radi s novim CSS3 svojstvima. Osim toga, budući da se stilovi dodaju dinamički, CSS datoteka prolazi provjeru valjanosti kao CSS2.1!
Dobivanje vremenaVrijeme se također može dobiti od koristeći PHP koda, ali to će biti vrijeme poslužitelja. I JavaScript se vraća lokalno vrijeme korisnik.
Podatke ćemo primati pomoću Datum() i postaviti sve naše varijable. Koristit ćemo u skladu s tim GetSeconds(), GetMinutes() ili GetHours() Za Datum() za postavljanje sekundi, minuta i sati redom:
Var seconds = new Date().getSeconds();
U gornjoj liniji će se dobiti broj iz raspona od 0 do 59 koji će se dodijeliti varijabli sekundi.
Određivanje kutaZatim morate izračunati kut rotacije za svaku strelicu. Za sekundnu i minutnu kazaljku, koje imaju 60 pozicija na satnom krugu, trebamo podijeliti 360 stupnjeva sa 60, što nam daje broj 6. To jest, svaka sekunda ili minuta odgovara rotaciji od 6 stupnjeva. Rezultat izračuna pohranit ćemo u drugu varijablu. Za nekoliko sekundi kod izgleda ovako:
Var stupanj = sekunde * 6;
Za satove će izračuni biti drugačiji. Budući da imamo brojčanik sa 12 položaja kazaljke na satu, svaki sat odgovara kutu rotacije od 30 stupnjeva (360/12=30). Ali i satna kazaljka mora biti u međustanjima, odnosno mora se pomicati svake minute. Odnosno, u 4:30 kazaljka na satu trebala bi biti na pola puta između 3 i 4 sata. Evo kako ćemo to učiniti:
Var hdegree = sati * 30 + (min / 2);
Odnosno, kutu rotacije po broju sati dodajemo vrijednost dijeljenja broja minuta s 2 (što će nam dati vrijednost u rasponu od 0,5 do 29,5). Tako će se satna kazaljka "zakrenuti" za kut od 0 do 30 stupnjeva (pomak sata).
Na primjer:
2 sata 40 minuta -> 2*30 = 60 stupnjeva i 40/2 = 20 stupnjeva. Ukupno: 80 stupnjeva.
Možemo pretpostaviti da će sat pokazati tko zna što nakon 12, jer će vrijednost rotacije biti veća od 360 stupnjeva. Ali sve radi super.
Sada smo spremni za umetanje CSS pravila.
Postavljanje stilaOvako izgleda CSS3 pravilo rotirati u listu stilova:
#sec ( -webkit-transform: rotiraj(45deg); -moz-transform: rotiraj(45deg); )
Evo kako će kod biti umetnut pomoću jQueryja:
$("#sec").css(("-moz-transform" : "rotiraj(45deg)", "-webkit-transform" : "rotiraj(45deg)"));
Jedini problem je postaviti rezultirajuću vrijednost kuta u varijabli "sdegree" u sintaksi umjesto 45 stupnjeva. Potrebno je konstruirati niz u drugoj varijabli srotirati i potpuno zamijeniti drugi argument. Kao ovo:
Var srotate = "rotirati(" + sdegree + "deg)";
A jQuery kod će izgledati ovako:
$("#sec").css(("-moz-transform" : srotate, "-webkit-transform" : srotate));
Sve skupajQuery kod će izgledati ovako:
$(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 = new Date().getMinutes(); var hdegree = sati * 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 = mins * 6; var mrotate = "rotate(" + mdegree + "deg)"; $("#min").css(("-moz-transform" : mrotate, "-webkit-transform" : mrotate) ); ), 1000); ));
Koristimo JavaScript funkcija setInterval za ažuriranje stilova svake sekunde. Varijable koje primaju vremenske vrijednosti moraju se ažurirati u njemu. Inače će sat postati beskorisno smeće na stranici.
ZaključakOva lekcija pokazuje praktičnu primjenu svojstva rotirati nije vezano uz dizajn.
Ovo je jednostavna skripta koja prikazuje uključeno vrijeme sustava JavaScript jednostavan tekst. Sati, minute i sekunde odvojene dvotočkom - to je sve.
Kako biste postavili vlastiti stil za sat, dovoljno je definirati stil za blok s ID-om - #vrijeme. U CSS-u možete postaviti vlastiti font za sat, njegovu boju i veličinu. Ako vam ne treba jednostavan sat, već složeniji, pogledajte Flash satove za web mjesto. Odakle skripta dobiva podatke o vremenu? Prikazano vrijeme točno je ono postavljeno na uređaju.
MontažaZalijepite sljedeći kod tamo gdje želite vidjeti sat na svojoj web stranici. Na uCozu to može biti, na primjer, "Vrh" ili "Dno stranice":
200?"200px":""+(this.scrollHeight+5)+"px");">
00:00:00
setInterval(funkcija () (
datum = novi datum(),
h = datum.getHours(),
m = datum.getMinutes(),
s = date.getSeconds(),
h = (h< 10) ? "0" + h: h,
m = (m< 10) ? "0" + m: m,
s = (s< 10) ? "0" + s: s,
document.getElementById("vrijeme").innerHTML = h + ":" + m + ":" + s;
}, 1000);
Skripta će odmah prikazati redak teksta sa satom na mjestu gdje ste ga instalirali. Na primjer, "00:00:00". Usput, sekunde, minute i sati uvijek su dvoznamenkasti, tako da se promjene vrijednosti odvijaju glatko.
Napravimo elektronički sat s datumom i vremenom koristeći jQuery i CSS3 za malu animaciju.
HTMLOznačavanje je jednostavno i fleksibilno. Napravite DIV s klasom pod nazivom sat, DIV s klasom pod nazivom Datum koja će prikazati datum i neuređen popis koji sadrži sate, minute i sekunde.
CSS
Stilovi dizajna s malom animacijom:
Spremnik (širina: 960px; margina: 0 auto; overflow: hidden;) .clock (width:800px; margin:0 auto; padding:30px; border:1px solid #333; color:#fff; ) #Date (font- obitelj: 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 ease infinite; -webkit-animation:mymove 1s ease 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; ) )
JSPovezivanje jQuery biblioteke
I onda naša skripta $(document).ready(function() ( // Kreirajte dvije varijable s nazivima mjeseci i dana u tjednu u nizu var monthNames = [ "Siječanj", "Veljača", "Ožujak", " travanj", "svibanj", "lipanj", "srpanj", "kolovoz", "rujan", "listopad", "studeni", "prosinac"]; var dayNames= ["nedjelja", "ponedjeljak", "utorak ", "Srijeda" ,"Četvrtak","Petak","Subota"] // Stvorite objekt newDate() var newDate = new Date(); // Dohvatite trenutni datum iz objekta Date newDate.setDate(newDate. getDate()); // Izlaz dan, datum, mjesec i godina $("#Date").html(dayNames + " " + newDate.getDate() + " " + monthNames + " " + newDate.getFullYear()) ; setInterval(function() ( / / Stvorite objekt newDate() i dohvatite sekunde trenutnog vremena var seconds = new Date().getSeconds(); // Dodajte početnu nulu vrijednosti sekundi $("#sec) ").html((sekundi< 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() - stvara novi objekt Datum s vrijednošću trenutni datum i trenutno vrijeme u pregledniku vašeg računala.
- setDate() - metoda postavlja dan u mjesecu (od 1 do 31), prema lokalnom vremenu
- getDate() - metoda vraća dan u mjesecu (od 1 do 31) za navedeni datum prema lokalnom vremenu
- getSeconds(), getMinutes() i getHours() - Ove metode vam omogućuju dohvaćanje sekundi, minuta i sati trenutnog vremena u pregledniku.
- (sekundi< 10 ? "0" : "") + seconds) - добавляет начальный ноль к значению секунд (минут и часов). Символы ? и : включают тернарный (ternary ) оператор. Это специальный оператор, который возвращает значение перед двоеточием, если условие перед вопросом (? ) верно (true ), или значение после двоеточия , если условие неверно (false ).
- Funkcija setInterval standardna je JavaScript funkcija, a ne dio jQueryja. Izvršava kod mnogo puta, u pravilnim intervalima (milisekundama).
Ovo je njihova glavna skripta:
200?"200px":""+(this.scrollHeight+5)+"px");">00:00:00
setInterval(funkcija () (
datum = novi datum(),
h = datum.getHours(),
m = datum.getMinutes(),
s = date.getSeconds(),
h = (h< 10) ? "0" + h: h,
m = (m< 10) ? "0" + m: m,
s = (s< 10) ? "0" + s: s,
document.getElementById("vrijeme").innerHTML = h + ":" + m + ":" + s;
}, 1000);
Na samom vrhu vidimo:
200?"200px":""+(this.scrollHeight+5)+"px");">00:00:00
Samo dodajte podebljani tekst i žutu nijansu i strelice.
200?"200px":""+(this.scrollHeight+5)+"px");">"00:00:00"
I evo što se dogodilo:
Tako da se i sami možete uvjeriti kako se sve promijenilo, a sada sve možete sami napraviti i lijepo urediti prema svom stilu. Da se drugi ne mogu raditi, pošto je Flash uključen, da ih nema ovdje.
Sada uz to postoji i sat na Flashu
200?"200px":""+(this.scrollHeight+5)+"px");">
.swf">
Dakle, možete odabrati koji vam se najviše sviđaju i instalirati ih, jer neki se mogu instalirati u bloku, ali vam se više sviđaju prvi jer su fleksibilni i prilagodljivi, što svatko može učiniti.