Acesta este scenariul lor principal:

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

setInterval(funcția () (
data = data noua(),
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);

În partea de sus vedem:

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

Doar adăugați text aldine și o nuanță galbenă și săgeți.

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

Și iată ce s-a întâmplat:

Așa că poți vedea singur cum totul s-a schimbat, iar acum poți să faci totul singur și să-l aranjezi frumos pentru a se potrivi stilurilor tale. Că altele nu se pot face, din moment ce Flash este acolo, că nu sunt aici.

Acum, în plus, există un ceas pe Flash

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

Asa ca poti sa alegi care iti plac mai mult si sa le instalezi, pentru ca unele pot fi instalate in bloc, dar iti plac mai mult primele, deoarece sunt flexibile si personalizabile, ceea ce poate face oricine.

Acesta este un script simplu care arată ora sistemului în JavaScript în text simplu. Ore, minute și secunde separate prin două puncte - asta-i tot.

Pentru a vă seta propriul stil pentru ceas, este suficient să definiți stilul pentru bloc cu ID - #time. În CSS puteți seta propriul font pentru ceas, culoarea și dimensiunea acestuia. Dacă nu aveți nevoie de un ceas simplu, ci de unul mai complex, atunci aruncați o privire Ceas flash pentru site. De unde obține scriptul datele de timp? Ora afișată este exact cea setată pe dispozitiv.

Lipiți următorul cod în locul de pe site unde doriți să vedeți ceasul. Pe uCoz, acesta ar putea fi, de exemplu, „Sup” sau „În partea de jos a site-ului”:

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

setInterval(funcția () (
data = data noua(),
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);

Scriptul va afișa imediat o linie de text cu un ceas în locul în care l-ați instalat. De exemplu, „00:00:00”. Secundele, minutele și orele, apropo, sunt întotdeauna din două cifre, așa că schimbarea valorilor are loc fără probleme.

Ne-am uitat deja la crearea unui ceas folosind CSS și JavaScript. În această lecție vom face același ceas folosind CSS3 pentru a vedea cum noul standard schimbă abordarea dezvoltării diferitelor efecte. Demo-ul pentru acest tutorial va funcționa numai în browsere care acceptă proprietatea CSS3 roti(demo-ul NU FUNCȚIONEAZĂ în IE6).

Transformare: rotire- o nouă proprietate CSS 3 care vă permite să rotiți diferite elemente. Folosind transformări, puteți, de asemenea, să schimbați scara elementelor, să introduceți distorsiuni orizontale și verticale și să mutați elemente în jurul unei pagini web. Toate acestea pot fi animate folosind proprietatea tranziție(cu diferite tipuri de tranziții și durată).

Aceleași acțiuni pentru animarea elementelor paginii pot fi efectuate folosind o bibliotecă JavaScript (de exemplu, jQuery). Desigur, puteți anima mai multe modificări ale proprietăților CSS cu jQuery decât cu tranziție. Dar jQuery este un instrument CSS încorporat, bibliotecile JavaScript sunt instrumente externe care pot să nu fie disponibile. În orice caz, CSS3 deschide noi direcții promițătoare pentru dezvoltarea dezvoltatorilor.

Mai întâi trebuie să facem o interfață grafică pentru ceas. Vom avea o bază și trei săgeți. Toate părțile în mișcare sunt tăiate în Photoshop la dimensiuni de 600 px înălțime și 30 px lățime și sunt poziționate vertical, iar în mod implicit proprietatea roti rotește elementul în jurul centrului. Puteți folosi proprietatea transformare-origine pentru a seta centrul de rotație într-un alt punct.

Puteți folosi orice imagine doriți pentru baza ceasului. Părțile în mișcare sunt imagini PNG cu transparență.

Arhiva codului sursă demo include un fișier PSD care conține toate imaginile.

Dispunerea ceasului este o listă simplă neordonată. Fiecare element de listă conține o parte în mișcare și are un ID corespunzător:

#ceas (poziție: relativă; lățime: 600px; înălțime: 600px; margine: 20px automat 0 auto; fundal: url(clockface.jpg); list-style: none; ) #sec, #min, #hour (poziția: absolut ; lățime: 30px: 0px: 285px ) #hour:

CSS-ul este, de asemenea, destul de simplu. Deoarece părțile mobile au aceleași dimensiuni și puncte de plecare, le putem declara împreună pentru a evita repetarea. Element ul primește poziționare relativă, ceea ce permite poziționarea absolută pentru săgețile situate în interiorul acesteia.

CSS3 va fi aplicat folosind un mic cod jQuery.

Trebuie remarcat faptul că jQuery funcționează excelent cu noile proprietăți CSS3. În plus, deoarece stilurile sunt adăugate dinamic, fișierul CSS este validat ca CSS2.1!

Timpul poate fi obținut și folosind codul PHP, dar acesta va fi timpul serverului. Și JavaScript returnează ora locală a utilizatorului.

Vom primi informații folosind Data()și setați toate variabilele noastre. Vom folosi în consecință GetSeconds(), GetMinutes() sau GetHours() Pentru Data() pentru a seta secunde, minute și, respectiv, ore:

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

În linia de mai sus, un număr din intervalul de la 0 la 59 va fi obținut și atribuit unei variabile secunde.

Apoi trebuie să calculați unghiul de rotație pentru fiecare săgeată. Pentru mâinile secunde și minutelor, care au 60 de poziții pe cercul orelor, trebuie să împărțim 360 de grade la 60, ceea ce ne oferă numărul 6. Adică fiecare secundă sau minut corespunde unei rotații de 6 grade. Vom stoca rezultatul calculelor într-o altă variabilă. Pentru câteva secunde codul arată astfel:

Var grad = secunde * 6;

Pentru ceasuri, calculele vor fi diferite. Deoarece avem un cadran cu 12 poziții pentru acul orelor, fiecărei ore îi corespunde un unghi de rotație de 30 de grade (360/12=30). Însă și acul orelor trebuie să fie în stări intermediare, adică trebuie să se miște în fiecare minut. Adică la ora 4:30 acul orelor ar trebui să fie la jumătatea distanței între orele 3 și 4. Iată cum o vom face:

Var hdegree = ore * 30 + (mins / 2);

Adică, adăugăm la unghiul de rotație cu numărul de ore valoarea împărțirii numărului de minute la 2 (ceea ce ne va oferi o valoare în intervalul de la 0,5 la 29,5). Astfel, acul orelor va fi „rotit” cu un unghi de la 0 la 30 de grade (incrementul orelor).

De exemplu:

2 ore 40 minute -> 2*30 = 60 grade si 40/2 = 20 grade. Total: 80 de grade.

Putem presupune că ceasul va arăta cine știe ce după ora 12, deoarece valoarea rotației va fi mai mare de 360 ​​de grade. Dar totul merge bine.

Acum suntem gata să inserăm reguli CSS.

Așa arată o regulă CSS3 rotiîn foaia de stil:

#sec ( -webkit-transform: rotiți(45deg); -moz-transform: rotiți(45deg); )

Și așa va fi inserat codul folosind jQuery:

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

Singura problemă este să setați valoarea unghiului rezultată în variabila „sdegree” din sintaxă în loc de 45 de grade. Trebuie să construiți un șir într-o altă variabilă srotateși înlocuiți complet al doilea argument. Ca aceasta:

Var srotate = "rotire(" + sdegree + "grade)";

Și codul jQuery va arăta astfel:

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

Codul jQuery va arăta astfel:

$(document).ready(function() ( setInterval(function() (var secunde = new Date().getSeconds(); var sdegree = secunde * 6; var srotate = "rotate(" + sdegree + "deg)" ; $("#sec").css(("-moz-transform" : srotate, "-webkit-transform" : srotate)), 1000 setInterval(function() ( var hours = new Date()); .getHours(); var min = new Date().getMinutes( var hdegree * 30 + (mins / 2) = "rotate(" + hdegree)"; ("-moz-transform" : hrotate, "-webkit-transform" : hrotate) ), 1000 setInterval(function() ( var min = new Date().getMinutes(); var mdegree = mins * 6); ; var mrotate = "rotate(" + mdegree + "deg)";

Folosim funcția JavaScript setInterval pentru a actualiza stilurile în fiecare secundă. Variabilele care primesc valori de timp trebuie să fie actualizate în acesta. În caz contrar, ceasul va deveni un gunoi inutil pe pagină.

Această lecție demonstrează aplicarea practică a proprietății roti nu are legătură cu designul.

Să facem un ceas electronic cu data și ora folosind jQuery și CSS3 pentru o mică animație.

Markup-ul este simplu și flexibil. Creați un DIV cu o clasă numită ceas , un DIV cu o clasă numită Date care va afișa data și o listă neordonată care conține orele, minutele și secundele.

Stiluri de design cu animație mică:

Container (lățime: 960px; margine: 0 automat; overflow: ascuns;) .clock (lățime: 800px; margin:0 auto; padding:30px; chenar:1px solid #333; culoare:#fff; ) #Date ( font- familie: Arial, Helvetica, sans-serif text-align:center text-shadow:0 0 5px #00c6ff ul (width:800px; margin:0 auto; padding:0px; 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 (poziție: relative; -moz-animation:mymove 1s ease infinite -webkit-animation:mymove 1s ease infinite-left:10px ) @-webkit-keyframes (0%; -shadow:0 0 20px #00c6ff;) 50% (opacitate:0; text-shadow:none; ) 100% (opacitate:1.0; text-shadow:0 0 20px #00c6ff; ) ) @-moz-keyframes mymove ( 0% (opacitate:1.0; text-shadow:0 0 20px #00c6ff;) 50% (opacitate:0; text-shadow:none; ) 100% (opacitate:1.0; text-shadow:0 0 20px #00c6ff; ) )

Conectarea bibliotecii jQuery

Și apoi scriptul nostru $(document).ready(function() ( // Creați două variabile cu numele lunilor și zilelor săptămânii în tabloul var monthNames = [ "Ianuarie", "Februarie", "Martie", " Aprilie", "Mai", "Iunie", "Iulie", "August", "Septembrie", "Octombrie", "Noiembrie", "Decembrie" ]; var dayNames= ["Duminica", "Luni", "Marti" ", "Miercuri" ,"Joi","Vineri","Sâmbătă"] // Creați un obiect newDate() var newDate = new Date(); // Preluați data curentă din obiectul Date newDate.setDate(newDate. getDate()); // Ieșire ziua, data, luna și anul $("#Date").html(dayNames + " " + newDate.getDate() + " " + monthNames + " " + newDate.getFullYear()) ; / Creați un obiect newDate() și preluați secundele din timpul curent var seconds = new Date().getSeconds() // Adăugați un zero de început la valoarea secundelor $("#sec").html((secunde);< 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() - creează un nou obiect Date cu valoarea datei și orei curente în browserul computerului.
• setDate() - metoda setează ziua lunii (de la 1 la 31), în funcție de ora locală
• getDate() - metoda returnează ziua lunii (de la 1 la 31) pentru data specificată în funcție de ora locală
• getSeconds(), getMinutes() și getHours() - Aceste metode vă permit să preluați secundele, minutele și orele din timpul curent în browser.
• (secunde< 10 ? "0" : "") + seconds) - добавляет начальный ноль к значению секунд (минут и часов). Символы ? и : включают тернарный (ternary ) оператор. Это специальный оператор, который возвращает значение перед двоеточием, если условие перед вопросом (? ) верно (true ), или значение после двоеточия , если условие неверно (false ).
• Funcția setInterval este o funcție JavaScript standard, nu face parte din jQuery. Execută codul de mai multe ori, la intervale regulate (milisecunde).