Kako dodati sat u html. Ručni sat koristeći CSS3

Već smo razgovarali o kreiranju satova sa brojčanikom koristeći CSS i JavaScript. U ovom vodiču ćemo napraviti isti sat koristeći CSS3 da vidimo kako novi standard mijenja pristup razvijanju raznih efekata. Demo za ovaj vodič će raditi samo u pretraživačima koji podržavaju svojstvo CSS3 rotirati(demo NE RADI u IE6).

Transformiraj: rotiraj- novo CSS 3 svojstvo koje vam omogućava da rotirate različite elemente. Koristeći transformacije, također možete promijeniti skalu elemenata, uvesti horizontalna i vertikalna izobličenja i premjestiti elemente po web stranici. Sve se to može animirati korištenjem imovine tranzicija(Sa različite vrste tranzicije i trajanje).

Iste radnje za animiranje elemenata stranice mogu se izvesti pomoću neke JavaScript biblioteke (na primjer, jQuery). Naravno, sa koristeći jQuery možete animirati promjenu mnogo više CSS svojstva nego koristeći tranzicija. Ali jQuery je ugrađeni CSS alat, JavaScript biblioteke su eksterni alati koji možda nisu dostupni. U svakom slučaju, CSS3 otvara nove obećavajuće pravce za razvoj programera.

Prvo moramo da uradimo GUI za satove. Imaćemo bazu i tri strelice. Svi pokretni dijelovi su izrezani u Photoshopu na dimenzije od 600px visine i 30px širine, i postavljeni su okomito, a prema zadanim postavkama svojstvo rotirati rotira element oko centra. Možete koristiti nekretninu transformacija porijekla kako bi se centar rotacije postavio na drugu tačku.

Za osnovu sata možete koristiti bilo koju sliku koju želite. Pokretni dijelovi su slike PNG format sa transparentnošću.

Arhivirano sa izvorni kod uključene demo snimke PSD fajl, koji sadrži sve slike.

Izgled sata je jednostavna neuređena lista. Svaki element liste sadrži pokretni dio i ima odgovarajući ID:

#clock ( pozicija: relativna; širina: 600px; visina: 600px; margina: 20px auto 0 auto; pozadina: url(clockface.jpg); stil liste: nema; ) #sec, #min, #hour (pozicija: apsolutna širina: 600px slijeva: 285px;

CSS je takođe prilično jednostavan. Budući da pokretni dijelovi imaju iste veličine i početne tačke, onda ih možemo zajedno proglasiti kako bismo izbjegli ponavljanje. Element ul prima relativno pozicioniranje, što omogućava apsolutno pozicioniranje za strelice koje se nalaze unutar njega.

CSS3 će se primijeniti pomoću mali kod jQuery.

Treba napomenuti da jQuery odlično radi sa novim CSS3 svojstvima. Osim toga, pošto se stilovi dodaju dinamički, CSS datoteka je validirana kao CSS2.1!

Vrijeme se također može dobiti pomoću PHP koda, ali to će biti vrijeme servera. A JavaScript vraća korisnikovo lokalno vrijeme.

Informacije ćemo primati koristeći Datum() i postaviti sve naše varijable. Koristićemo u skladu sa tim GetSeconds(), Get Minutes() ili GetHours() Za Datum() da postavite sekunde, minute i sate respektivno:

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

U gornjem redu će se dobiti broj iz raspona od 0 do 59 koji će biti dodijeljen varijabli sekundi.

Zatim morate izračunati ugao rotacije za svaku strelicu. Za kazaljke sekunde i minute, koje imaju 60 pozicija na satnom krugu, trebamo podijeliti 360 stepeni sa 60, što nam daje broj 6. To jest, svaka sekunda ili minuta odgovara rotaciji od 6 stepeni. Rezultat proračuna ćemo pohraniti u drugu varijablu. Na sekunde kod izgleda ovako:

Var stepen = sekunde * 6;

Satima će proračuni biti drugačiji. Pošto imamo brojčanik sa 12 pozicija za kazaljku sata, svaki sat odgovara kutu rotacije od 30 stepeni (360/12=30). Ali kazaljka sata takođe mora biti u međustanjima, odnosno mora se kretati svakog minuta. Odnosno, u 4:30 satna kazaljka treba da bude na pola puta između 3 i 4 sata. Evo kako ćemo to učiniti:

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

To jest, kutu rotacije dodajemo broj sati vrijednost dijeljenja broja minuta sa 2 (što će nam dati vrijednost u rasponu od 0,5 do 29,5). Dakle, kazaljka sata će biti "rotirana" za ugao od 0 do 30 stepeni (satni prirast).

na primjer:

2 sata 40 minuta -> 2*30 = 60 stepeni i 40/2 = 20 stepeni. Ukupno: 80 stepeni.

Možemo pretpostaviti da će sat pokazati ko zna šta posle 12, pošto će vrednost rotacije biti veća od 360 stepeni. Ali sve radi dobro.

Sada smo spremni da ubacimo CSS pravila.

Ovako izgleda CSS3 pravilo rotirati u stilskoj tablici:

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

A ovako će kod biti umetnut koristeći jQuery:

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

Jedini problem je postaviti rezultujuću vrijednost ugla u varijablu "sdegree" u sintaksi umjesto 45 stepeni. Potrebno je konstruisati string u drugoj varijabli srotate i potpuno zamijeniti drugi argument. ovako:

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

A jQuery kod izgledat će ovako:

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

jQuery 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().getMinutes()var hdegree = hours * 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" : 1000);

Koristimo JavaScript funkcija setInterval da ažurirate stilove svake sekunde. U njemu se moraju ažurirati varijable koje primaju vrijednosti vremena. U suprotnom, sat će postati beskorisno smeće na stranici.

Ova lekcija pokazuje praktičnu primjenu svojstva rotirati nije vezano za dizajn.

Hajde da napravimo elektronski sat sa datumom i vremenom koristeći jQuery i CSS3 za malu animaciju.

Označavanje je jednostavno i fleksibilno. Kreirajte DIV sa klasom koja se zove clock, DIV sa klasom koja se zove Date koja će prikazati datum i neuređenu listu koja sadrži sate, minute i sekunde.

Stilovi dizajna s malom animacijom:

Kontejner (širina: 960px; margina: 0 auto; prelivanje: skriveno;) .clock (širina:800px; margin:0 auto; padding:30px; granica:1px čvrsta #333; boja:#fff; ) #Datum (font- porodica: Arial, Helvetica, text-align:center:0 5px #00c6ff ul (width:800px; margin:0 auto; padding: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 (pozicija:); relativno: mymove 1s ease infinite: mymove 1s ease infinite: 10px; -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% (neprozirnost:1.0; text-shadow:0 0 20px #00c6ff;) 50% (opacity:0; text-shadow:none; ) 100% (neprozirnost:1.0; text-shadow:0 0 20px #00c6ff; ) )

Povezivanje jQuery biblioteke

A onda naša skripta $(document).ready(function() ( // Kreiramo dvije varijable s imenima mjeseci i dana u sedmici u nizu var monthNames = [ "Januar", "Februar", "Mart", " april", "maj", "jun", "jul", "avgust", "septembar", "oktobar", "novembar", "decembar" ]; var dayNames= ["nedelja", "ponedeljak", "utorak" ", "Wednesday" ,"Thursday","Friday","Saturday"] // Kreirajte objekt newDate() var newDate = new Date(); // Dohvatite trenutni datum iz objekta Date newDate.setDate(newDate. getDate() // Izlazni dan, datum, mjesec i godina $("#Date").html(dayNames + " " + newDate.getDate() + " " + monthNames + " " + newDate.getFullYear()) ; setInterval(function() ( / / Kreirajte objekt newDate() i dohvatite sekunde trenutnog vremena var seconds = new Date().getSeconds(); // Dodajte početnu nulu vrijednosti sekunde $("#sec); ").html((sekunde< 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() - kreira novi objekat Datum sa vrijednošću trenutnog datuma i trenutnog vremena u pretraživaču računara.
• 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ćavaju da preuzmete sekunde, minute i sate trenutnog vremena u pretraživaču.
• (sekunde< 10 ? "0" : "") + seconds) - добавляет начальный ноль к значению секунд (минут и часов). Символы ? и : включают тернарный (ternary ) оператор. Это специальный оператор, который возвращает значение перед двоеточием, если условие перед вопросом (? ) верно (true ), или значение после двоеточия , если условие неверно (false ).
• Funkcija setInterval je standardna JavaScript funkcija, nije dio jQueryja. Izvršava kod mnogo puta, u pravilnim intervalima (milisekunde).

Ovo je njihova glavna skripta:

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

setInterval(funkcija () (
datum = novi datum(),
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);

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 šta se desilo:

Tako da možete i sami da vidite kako se sve promenilo, a sada sve možete sami da uradite i lepo uredite u skladu sa vašim stilovima. Da se drugi ne mogu, pošto je Flash tu, da oni nisu ovdje.

Sada kao dodatak postoji i sat na Flash-u

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

Tako da možete izabrati koji vam se najviše sviđaju i instalirati ih, jer se neki mogu ugraditi u blok, ali vam se prvi više sviđaju, jer su fleksibilni i prilagodljivi, što svako može.

Ovo je jednostavna skripta koja pokazuje sistemsko vrijeme u JavaScriptu u običnom tekstu. Sati, minute i sekunde razdvojeni dvotočkom - to je sve.

Da biste postavili vlastiti stil za sat, dovoljno je definirati stil za blok sa ID-om - #time. U CSS-u možete postaviti vlastiti font za sat, njegovu boju i veličinu. Ako vam nije potreban jednostavan sat, već složeniji, pogledajte Flash satove za web lokaciju. Odakle skripta dobija podatke o vremenu? Prikazano vrijeme je tačno onoliko koliko je podešeno na uređaju.

Zalijepite sljedeći kod na mjesto na web mjestu gdje želite da vidite sat. Na uCoz-u 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 = 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);

Skripta će odmah prikazati red teksta sa satom na mjestu gdje ste ga instalirali. Na primjer, "00:00:00". Sekunde, minute i sati, inače, uvijek su dvocifrene, tako da se promjene vrijednosti odvijaju glatko.