Secțiuni de site
Alegerea editorului:
- Resetarea din fabrică pentru ZTE Blade X3
- Cum să deblochezi parola Honor dacă ai uitat-o pe smartphone?
- Tehnologia Thunderbolt: cum funcționează și care sunt avantajele acesteia
- Cum să crești TIC și PR Cum să crești singur TIC Yandex
- Versiunea Kernel 3.10. Afișarea intermitentă a nucleului unui dispozitiv Android. Care este nucleul unui dispozitiv mobil?
- Recuperare folosind discul de instalare
- Instalarea Win 10 on 7. Sfaturi de la experți
- Metoda supremă pentru reinstalarea Windows de pe o unitate flash USB
- Android Pay: cum funcționează și cum se folosește?
- De ce laptopul nu pornește: cauzele problemei și cum să le remediați
Publicitate
Ceas digital cu CSS3 și jQuery. Ceas manual folosind CSS3 Ceas digital în javascript |
Ne-am uitat deja la crearea unui ceas folosind CSS și JavaScript. În acest tutorial vom face același ceas folosind CSS3 pentru a vedea cum nou 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 CSS3: rotire 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 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 mult mai multe modificări folosind jQuery Proprietăți CSS decât folosind 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. Grafică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ță. Arhivat cu cod 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: CSS#ceas (poziție: relativă; lățime: 600px; înălțime: 600px; margine: 20px automat 0 auto; fundal: url(clockface.jpg); stil listă: niciunul; ) #sec, #min, #oră (poziția: absolut ; lățime: 30px: 600px: z-index: 2; 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. JavaScriptTrebuie remarcat faptul că jQuery funcționează excelent cu noile proprietăți CSS3. În plus, deoarece stilurile sunt adăugate dinamic, fișier CSS trece validarea ca CSS2.1! Obține timpTimpul poate fi obținut și de la folosind PHP cod, dar va fi ora 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. Determinarea unghiuluiApoi 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 ore, 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). Dar ș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 dintre ora 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. Stabilirea stiluluiAș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)); Punând totul împreună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)"; Noi 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ă. ConcluzieAceastă lecție demonstrează aplicarea practică a proprietății roti nu are legătură cu designul. Un ceas digital simplu care va afișa ora sistemului dumneavoastră. Totul aici se face în JavaScript, așa că le puteți edita în design. Instalarea lor este la fel de simplă ca și ei înșiși, le puteți pune în partea de sus a site-ului, unde le puteți vedea în mare parte. Plusul este, după cum s-a spus, le puteți face după cum aveți nevoie, totul depinde de ID - #time unde funcționează în HTML Code Panel, dar totul este mai detaliat.Acesta este scenariul lor principal: 200?"200px":""+(this.scrollHeight+5)+"px");">00:00:00 În partea de sus vedem: 200?"200px":""+(this.scrollHeight+5)+"px");">00:00:00 Doar adăugați text îngroșatși 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");"> Așa că poți să alegi care îți plac cel mai mult și să le instalezi, pentru că unele pot fi instalate în bloc, dar îți plac mai mult primele, deoarece sunt flexibile și personalizabile, ceea ce poate face oricine. Hai să o facem ceas electronic cu data și ora folosind jQuery și CSS3 pentru o mică animație. HTMLMarkup-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. CSS 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 padding-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; ) ) JSConectarea 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()); ziua, data, luna si anul $("#Date").html(dayNames + " " + newDate.getDate() + " " + monthNames + " " + newDate.getFullYear()); function() ( // Creați un obiect newDate() și preluați secundele din timpul curent var secunde = 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); });
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 uitați-vă la ceasuri Flash pentru site. De unde obține scriptul datele de timp? Ora afișată este exact cea setată pe dispozitiv. InstalareLipiț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");"> 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 formate din două cifre, așa că modificarea valorilor are loc fără probleme. |
Popular:
Sisteme de sunet distribuite |
Nou
- Cum să deblochezi parola Honor dacă ai uitat-o pe smartphone?
- Tehnologia Thunderbolt: cum funcționează și care sunt avantajele acesteia
- Cum să crești TIC și PR Cum să crești singur TIC Yandex
- Versiunea Kernel 3.10. Afișarea intermitentă a nucleului unui dispozitiv Android. Care este nucleul unui dispozitiv mobil?
- Recuperare folosind discul de instalare
- Instalarea Win 10 on 7. Sfaturi de la experți
- Metoda supremă pentru reinstalarea Windows de pe o unitate flash USB
- Android Pay: cum funcționează și cum se folosește?
- De ce laptopul nu pornește: cauzele problemei și cum să le remediați
- Modul de hibernare în Windows - ce este și cum se utilizează