Abbiamo già esaminato la creazione di un orologio utilizzando CSS e JavaScript. In questa lezione realizzeremo lo stesso orologio utilizzando CSS3 per vedere come il nuovo standard cambia l'approccio allo sviluppo di vari effetti. La demo di questo tutorial funzionerà solo nei browser che supportano la proprietà CSS3 ruotare(la demo NON FUNZIONA in IE6).
Trasforma: ruota- una nuova proprietà CSS 3 che consente di ruotare vari elementi. Utilizzando le trasformazioni, puoi anche modificare la scala degli elementi, introdurre distorsioni orizzontali e verticali e spostare gli elementi all'interno di una pagina web. Tutto questo può essere animato utilizzando la proprietà transizione(con diversi tipi di transizioni e durata).
Le stesse azioni per l'animazione degli elementi della pagina possono essere eseguite utilizzando alcune librerie JavaScript (ad esempio jQuery). Naturalmente, puoi animare molte più modifiche alle proprietà CSS con jQuery che con transizione. Ma jQuery è uno strumento CSS integrato, le librerie JavaScript sono strumenti esterni che potrebbero non essere disponibili. In ogni caso, i CSS3 aprono nuove promettenti direzioni per lo sviluppo degli sviluppatori.
Arti grafichePer prima cosa dobbiamo creare un'interfaccia grafica per l'orologio. Avremo una base e tre frecce. Tutte le parti mobili vengono tagliate in Photoshop alle dimensioni di 600 px di altezza e 30 px di larghezza e sono posizionate verticalmente e per impostazione predefinita la proprietà ruotare ruota l'elemento attorno al centro. È possibile utilizzare la proprietà origine della trasformazione per impostare il centro di rotazione su un punto diverso.
Puoi utilizzare qualsiasi immagine che preferisci per la base dell'orologio. Le parti in movimento sono immagini PNG con trasparenza.
L'archivio del codice sorgente demo include un file PSD che contiene tutte le immagini.
Il layout dell'orologio è un semplice elenco non ordinato. Ogni elemento dell'elenco contiene una parte mobile e ha un ID corrispondente:
CSS#orologio ( posizione: relativa; larghezza: 600px; altezza: 600px; margine: 20px auto 0 auto; sfondo: url(clockface.jpg); stile elenco: nessuno; ) #sec, #min, #ora ( posizione: assoluta ; larghezza: 30px; altezza: 600px; superiore: 0px; sinistra: 285px; ) #sec ( sfondo: url(sechand.png); z-index: 3; ) #min ( sfondo: url(minhand.png); z -index: 2; ) #hour ( background: url(hourhand.png); z-index: 1; )
Anche il CSS è abbastanza semplice. Poiché le parti mobili hanno le stesse dimensioni e punti di partenza, possiamo dichiararle insieme per evitare ripetizioni. Elemento ul riceve il posizionamento relativo, che consente il posizionamento assoluto delle frecce situate al suo interno.
Il CSS3 verrà applicato utilizzando un piccolo codice jQuery.
JavaScriptVa notato che jQuery funziona benissimo con le nuove proprietà CSS3. Inoltre, poiché gli stili vengono aggiunti dinamicamente, il file CSS viene convalidato come CSS2.1!
Ottenere tempoL'ora può essere ottenuta anche utilizzando il codice PHP, ma questa sarà l'ora del server. E JavaScript restituisce l'ora locale dell'utente.
Riceveremo informazioni utilizzando Data() e impostare tutte le nostre variabili. Utilizzeremo di conseguenza OttieniSecondi(), OttieniMinuti() O OttieniOre() Per Data() per impostare rispettivamente i secondi, i minuti e le ore:
Var secondi = new Date().getSeconds();
Nella riga sopra verrà ottenuto un numero compreso tra 0 e 59 e assegnato a una variabile secondi.
Determinazione dell'angoloQuindi è necessario calcolare l'angolo di rotazione di ciascuna freccia. Per le lancette dei secondi e dei minuti, che hanno 60 posizioni sul cerchio delle ore, dobbiamo dividere 360 gradi per 60, che ci dà il numero 6. Cioè, ogni secondo o minuto corrisponde a una rotazione di 6 gradi. Memorizzeremo il risultato dei calcoli in un'altra variabile. Per secondi il codice appare così:
Var grado = secondi * 6;
Per gli orologi, i calcoli saranno diversi. Poiché abbiamo un quadrante con 12 posizioni per la lancetta delle ore, ogni ora corrisponde ad un angolo di rotazione di 30 gradi (360/12=30). Ma anche la lancetta delle ore deve trovarsi in stati intermedi, cioè deve muoversi ogni minuto. Cioè, alle 4:30 la lancetta delle ore dovrebbe essere a metà strada tra le 3 e le 4. Ecco come lo faremo:
Var hdegree = ore * 30 + (minuti/2);
Cioè, aggiungiamo all'angolo di rotazione per il numero di ore il valore della divisione del numero di minuti per 2 (che ci darà un valore compreso tra 0,5 e 29,5). Pertanto, la lancetta delle ore verrà “ruotata” di un angolo compreso tra 0 e 30 gradi (incremento delle ore).
Per esempio:
2 ore e 40 minuti -> 2*30 = 60 gradi e 40/2 = 20 gradi. Totale: 80 gradi.
Possiamo supporre che l'orologio indicherà chissà cosa dopo le 12, poiché il valore di rotazione sarà superiore a 360 gradi. Ma tutto funziona bene.
Ora siamo pronti per inserire le regole CSS.
Impostazione dello stileEcco come appare una regola CSS3 ruotare nel foglio di stile:
#sec ( -webkit-transform: ruota (45 gradi); -moz-transform: ruota (45 gradi); )
Ed ecco come verrà inserito il codice utilizzando jQuery:
$("#sec").css(("-moz-transform" : "rotate(45deg)", "-webkit-transform" : "rotate(45deg)"));
L'unico problema è impostare il valore dell'angolo risultante nella variabile "sdegree" nella sintassi invece di 45 gradi. È necessario costruire una stringa in un'altra variabile srotate e sostituire completamente il secondo argomento. Come questo:
Var srotate = "ruota(" + sgradi + "gradi)";
E il codice jQuery sarà simile a questo:
$("#sec").css(("-moz-transform" : srotate, "-webkit-transform" : srotate));
Mettere tutto insiemeIl codice jQuery sarà simile al seguente:
$(document).ready(function() ( setInterval(function() ( var secondi = new Date().getSeconds(); var sdegree = secondi * 6; var srotate = "rotate(" + sdegree + "deg)" ; $("#sec").css(("-moz-transform" : srotate, "-webkit-transform" : srotate)); ), 1000); setInterval(function() ( var ore = new Date() .getHours(); var mins = new Date().getMinutes(); var hdegree = ore * 30 + (minuti / 2); var hrotate = "rotate(" + hdegree + "gradi)"; $("#ora ").css(("-moz-transform" : hrotate, "-webkit-transform" : hrotate)); ), 1000); setInterval(function() ( var mins = new Date().getMinutes(); var grado m = minuti * 6; var mrotate = "rotate(" + grado m + "gradi)"; $("#min").css(("-moz-transform" : mrotate, "-webkit-transform" : mrotate) ); ), 1000); ));
Stiamo utilizzando la funzione JavaScript setInterval per aggiornare gli stili ogni secondo. Le variabili che ricevono valori temporali devono essere aggiornate al suo interno. Altrimenti, l'orologio diventerà spazzatura inutile sulla pagina.
ConclusioneQuesta lezione dimostra l'applicazione pratica della proprietà ruotare non legato al design.
Realizziamo un orologio elettronico con data e ora utilizzando jQuery e CSS3 per una piccola animazione.
HTMLIl markup è semplice e flessibile. Crea un DIV con una classe chiamata clock , un DIV con una classe chiamata Date che visualizzerà la data e un elenco non ordinato contenente ore, minuti e secondi.
CSS
Stili di design con piccole animazioni:
Contenitore (larghezza: 960px; margine: 0 automatico; overflow: nascosto;) .clock (larghezza:800px; margine:0 automatico; imbottitura:30px; bordo:1px solido #333; colore:#fff; ) #Data ( font- famiglia: Arial, Helvetica, sans-serif; font-size:36px; text-align:center; text-shadow:0 0 5px #00c6ff; ) ul ( larghezza:800px; margine:0 auto; imbottitura: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; ) #punto ( posizione:relativa; -moz-animation:mymove 1s facilità infinito; -webkit-animation:mymove 1s facilità infinito; riempimento-sinistra:10px; riempimento-destra:10px; ) @-webkit-keyframes miomove ( 0% (opacità:1.0; text-shadow:0 0 20px #00c6ff;) 50% (opacità:0; text-shadow:none; ) 100% (opacità:1.0; text-shadow:0 0 20px #00c6ff; ) ) @-moz-keyframes mymove ( 0% (opacità:1.0; text-shadow:0 0 20px #00c6ff;) 50% (opacità:0; text-shadow:none; ) 100% (opacità:1.0; text-shadow :0 0 20px #00c6ff; ) )
JSCollegamento della libreria jQuery
E poi il nostro script $(document).ready(function() ( // Crea due variabili con i nomi dei mesi e dei giorni della settimana nell'array var MonthNames = [ "January", "February", "March", " aprile", "maggio", "giugno", "luglio", "agosto", "settembre", "ottobre", "novembre", "dicembre" ]; var dayNames= ["domenica", "lunedì", "martedì ", "Wednesday" ,"Thursday","Friday","Saturday"] // Crea un oggetto newDate() var newDate = new Date(); // Recupera la data corrente dall'oggetto Date newDate.setDate(newDate. getDate()); // Visualizza giorno, data, mese e anno $("#Date").html(dayNames + " " + newDate.getDate() + " " + MonthNames + " " + newDate.getFullYear()) ; setInterval(function() ( / / Crea un oggetto newDate() e recupera i secondi dell'ora corrente var secondi = new Date().getSeconds(); // Aggiunge uno zero iniziale al valore dei secondi $("#sec ").html((secondi< 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(): crea un nuovo oggetto Date con il valore della data e dell'ora correnti nel browser del computer.
- setDate() - metodo imposta il giorno del mese (da 1 a 31), in base all'ora locale
- getDate() - il metodo restituisce il giorno del mese (da 1 a 31) per la data specificata in base all'ora locale
- getSeconds(), getMinutes() e getHours() - Questi metodi consentono di recuperare i secondi, i minuti e le ore dell'ora corrente nel browser.
- (secondi< 10 ? "0" : "") + seconds) - добавляет начальный ноль к значению секунд (минут и часов). Символы ? и : включают тернарный (ternary ) оператор. Это специальный оператор, который возвращает значение перед двоеточием, если условие перед вопросом (? ) верно (true ), или значение после двоеточия , если условие неверно (false ).
- La funzione setInterval è una funzione JavaScript standard, non parte di jQuery. Esegue il codice più volte, a intervalli regolari (millisecondi).
Questa è la loro sceneggiatura principale:
200?"200px":""+(this.scrollHeight+5)+"px");">00:00:00
setInterval(funzione () (
data = nuova data(),
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);
In alto vediamo:
200?"200px":""+(this.scrollHeight+5)+"px");">00:00:00
Basta aggiungere testo in grassetto, una tinta gialla e frecce.
200?"200px":""+(this.scrollHeight+5)+"px");">"00:00:00"
E questo è quello che è successo:
Quindi puoi vedere di persona come tutto è cambiato, e ora puoi fare tutto da solo e organizzarlo magnificamente in base ai tuoi stili. Che gli altri non si possono fare, dato che Flash è lì, che non sono qui.
Ora in più c'è un orologio su Flash
200?"200px":""+(this.scrollHeight+5)+"px");">
.swf">
Quindi puoi scegliere quali ti piacciono di più e installarli, perché alcuni si possono installare in blocco, ma ti piacciono di più i primi, perché sono flessibili e personalizzabili, cosa che può fare chiunque.
