Come costruire un semplice calendario dell'Avvento in JavaScript
L'Avvento è il periodo di attesa e preparazione per il Natale che inizia quattro domeniche prima della vigilia di Natale. Il passaggio del tempo di Avvento è tradizionalmente misurato con l'aiuto di un calendario dell'Avvento o di una corona d'Avvento. Sebbene l'inizio dell'Avvento non sia una data fissa, i calendari dell'avvento iniziano di solito il 1 ° dicembre.
Basati sulle usanze locali, i calendari dell'Avvento possono avere disegni diversi, ma più frequentemente assumono la forma di grandi carte rettangolari con 24 finestre o porte segnando i giorni tra il 1 ° e il 24 dicembre. Le porte nascondono messaggi, poesie, preghiere o piccole sorprese.
In questo post ti mostrerò come creare un calendario dell'avvento in JavaScript orientato agli oggetti. Poiché è realizzato in JavaScript vaniglia, puoi facilmente inserire il codice nel tuo sito web.
- dimostrazione
- Scarica fonte
Progettazione calendario JavaScript
Il nostro calendario dell'Avvento avrà 24 porte su un'immagine di sfondo a tema natalizio. Ogni porta nasconderà una citazione legata al Natale che lo farà compare sotto forma di un messaggio di avviso quando l'utente fa clic sulla porta. Le porte rimangono chiuse fino a quando arriva il giorno, come nel caso del calendario dell'Avvento della vita reale; le porte non possono essere aperte prima del giorno giusto.
Le porte che sono già abilitate avranno un bordo e un colore di sfondo diversi (bianco) rispetto a quelli disabilitati (verde chiaro). Useremo HTML5, CSS3 e JavaScript per preparare il nostro calendario dell'Avvento simile a questo:
Passaggio 1: crea struttura e risorse file
Prima di tutto, dobbiamo scegliere una bella immagine di sfondo. Ne ho scelto uno con orientamento verticale da Pixabay, quindi il mio calendario conterrà 4 colonne e 6 righe.
Va bene se preferisci un orientamento orizzontale. Basta cambiare le posizioni delle porte nel codice JavaScript, come avrai 6 colonne e 4 righe. Se hai la tua immagine, crea una cartella chiamata /immagini, e salvalo.
Questa sarà la nostra unica risorsa di immagine per questo progetto.
Per i file JavaScript creare a / scripts cartella all'interno della cartella principale. Metti due file di testo vuoti in esso e nominali calendar.js e messages.js. calendar.js manterrà la funzionalità, mentre messages.js conterrà la matrice di messaggi che compaiono quando l'utente “si apre” (clicca sopra) le porte.
Avremo anche bisogno di un file HTML e CSS, quindi crea due file vuoti nella cartella principale e dai loro il nome index.html e style.css.
Quando sei pronto hai le risorse e la struttura dei file necessari per realizzare questo progetto, e la tua cartella di root ha un aspetto simile al seguente:
Passaggio 2: crea l'HTML
Il codice HTML che usiamo è piuttosto semplice. Il foglio di stile CSS è collegato nel
sezione, mentre il due file JavaScript sono inclusi nella parte inferiore del sezione. Quest'ultimo è necessario, perché se inseriamo gli script nel sezione, il codice non verrebbe eseguito, come esso usa gli elementi della pagina HTML caricata.Il Calendario dell'Avvento stesso è collocato all'interno del Elemento HTML, e non come proprietà di sfondo CSS, perché in questo modo possiamo facilmente accedervi come un elemento del DOM.
Sotto l'immagine posizioniamo una lista vuota non ordinata con il “adventDoors” selettore di identità che verrà popolato dagli script. Se l'utente non ha JavaScript abilitato nel proprio browser, vedrà semplicemente un'immagine natalizia semplice.
Calendario dell'avvento Calendario dell'avvento
Passaggio 3: compilare il “messaggi” schieramento
Abbiamo bisogno di 24 citazioni di Natale per popolare il “messaggi” array. Ho scelto il mio da GoodReads.
Apri il scripts / messages.js file; inseriremo qui le virgolette per tenerle separate dalla funzionalità. Il messaggi array è una matrice all'interno di un array, ogni elemento dell'array esterno contiene un altro array con due elementi: una citazione e il suo autore.
Compila la matrice con le tue citazioni preferite in base alla seguente sintassi:
var messages = [["Quote 1", "Autore 1"], ["Quote 2", "Autore 2"], ... ["Quote 24", "Autore 24"]];
Passaggio 4: aggiungere stili CSS di base per le porte
Per creare gli stili CSS necessari per le porte, è necessario immaginare il progetto finale, in quanto le porte stesse verranno create con JavaScript nei seguenti passaggi.
Abbiamo bisogno di creare 4 colonne e 6 file di rettangoli nel corretto allineamento. Per questo, useremo il posizione: relativa e il posizione: assoluta Regole CSS Poiché la posizione esatta cambierà porta per porta, aggiungeremo il superiore, parte inferiore, sinistra, e destra proprietà nel JavaScript, nel CSS abbiamo solo bisogno di aggiungere una posizione relativa al contenitore (lista non ordinata nell'HTML) e posizioni assolute per gli elementi della lista (saranno aggiunti anche nel JS).
L'altra cosa importante nel file del foglio di stile è creare un design diverso per i disabili e gli stati abilitati. Il .Disabilitato il selettore verrà aggiunto ai disabili da JavaScript.
Per la mia demo Calendar ho impostato un solido bordo bianco e caratteri bianchi per le porte abilitate con uno sfondo bianco trasparente al passaggio del mouse; e un bordo verde chiaro e caratteri e uno sfondo trasparente verde chiaro per i disabili. Se non ti piace questo disegno puoi cambiare i colori e gli stili secondo i tuoi desideri.
Inserisci il seguente codice (o le tue regole di stile modificate) nel tuo style.css file.
ul #adventDoors position: relative; stile elenco: nessuno; padding: 0; margine: 0; #adventDoors li position: absolute; #adventDoors li a color: #fff; larghezza: 100%; altezza: 100%; font-size: 24px; allineamento del testo: centro; display: flex; direzione della flessione: colonna; justify-content: center; decorazione del testo: nessuna; bordo: 1px #fff solido; #adventDoors li a: not (.disabled): hover color: #fff; colore di sfondo: trasparente; background-color: rgba (255,255,255,0.15); #adventDoors li a.disabled border-color: # b6fe98; colore di sfondo: rgba (196,254,171,0,15); colore: # b6fe98; cursore: predefinito;
Passaggio 5: creare le variabili globali
Da questo punto in poi, lavoreremo solo con scripts / calendar.js file, quindi ora apriamolo. Il nostro calendario dell'Avvento utilizzerà due variabili globali.
Il Mycal variabile tiene l'immagine del calendario come un oggetto JS. L'immagine è già stata aggiunta al index.html file nel passaggio 2. Inseriremo le porte su questa immagine nel passaggio 7. Catturiamo l'HTML correlato elemento contrassegnato con “adventCal” identificatore utilizzando il metodo DOM getElementById (). Il Mycal la variabile sarà un oggetto DOM HTMLImageElement.
Il data odierna variabile mantiene la data corrente in modo che il nostro script possa decidere facilmente se una porta debba essere abilitata o disabilitata. Creare data odierna istanziamo un nuovo oggetto della classe Date JavaScript.
Inserisci il seguente frammento di codice nella parte superiore del tuo calendar.js file.
var myCal = document.getElementById ("adventCal"); var currentDate = new Date (); Passaggio 6: creare il “Porta” Classe
Poiché abbiamo bisogno di 24 porte, il modo più semplice per farlo è creare un “Porta” classe, e successivamente lo istanziamo 24 volte.
La nostra classe Door ha due parametri, calendario e giorno. Per il calendario parametro dovremo passare l'immagine di Natale che funzionerà come sfondo. Per il giorno parametro dovremo passare l'attuale giorno di dicembre sotto forma di numero intero.
Passeremo i valori esatti dei parametri nell'ultimo passaggio (fase 8), durante l'istanziazione degli oggetti 24 porte.
Creeremo 5 proprietà e 1 metodo per la classe Door. In questo passaggio passeremo solo attraverso le 5 proprietà e spiegherò il soddisfare() metodo nel passaggio successivo.
Il “larghezza” & “altezza” proprietà
Il larghezza e altezza le proprietà calcolano dinamicamente la larghezza e l'altezza di ogni singola porta (che cambia in base alla larghezza e all'altezza dell'immagine di sfondo).
I moltiplicatori 0.1 e 0.95 sono nell'equazione per lasciare un po 'di spazio per i margini, tra ogni porta e attorno ai lati del Calendario, anche.
Il “adventMessage” proprietà
Il adventMessage proprietà contiene il contenuto dei messaggi di avviso, vale a dire le citazioni e gli autori corrispondenti che il nostro messages.js il file contiene. Il adventMessage proprietà prende una citazione e un autore dal messaggi [] array, a seconda della data corrente.
Per il 1 dicembre il adventMessage la proprietà prende il primo elemento dell'array esterno che è messaggi [0], poiché gli array sono basati su zero in JavaScript.
Per lo stesso motivo, la citazione per Dec 1 è posizionata come messaggi [0] [0] (primo elemento dell'array interno) e l'autore corrispondente può essere raggiunto come messaggi [0] [1] (secondo elemento dell'array interno).
Il “X”&”y” proprietà
Proprietà X e y tenere le posizioni corrette di ogni porta che useremo nel passaggio successivo per impostare il superiore e sinistra Proprietà CSS. Questi completeranno il posizione: relativa e posizione: assoluta Regole CSS che abbiamo impostato nel passaggio 4 per il contenitore della porta (ul # adventDoors) e le porte stesse (#adventDoors li). I calcoli possono sembrare alquanto intimidatori, ma passiamo rapidamente attraverso di essi.
Il X la proprietà sarà utilizzata da sinistra Proprietà di posizionamento CSS nel passaggio successivo (passaggio 7). Determina in pixel dove una singola porta deve essere posizionata sull'asse x.
Prende la larghezza dell'immagine di sfondo e lascia un piccolo margine (4%). Quindi, con l'aiuto dell'operatore restante, valuta in quale colonna verrà inserito (ricorda, ci saranno 4 colonne) e infine aggiungerà un piccolo margine (10%) a ogni singola Porta usando un moltiplicatore 1.1.
Allo stesso modo, il y la proprietà sarà utilizzata da superiore Proprietà di posizionamento CSS e allo stesso modo determina in pixel dove è necessario posizionare una porta individuale sull'asse y.
Prendiamo l'altezza dell'immagine di sfondo con l'aiuto della proprietà height del passato calendario parametro (che contiene un oggetto DOM) e lascia un margine del 4% attorno ai lati verticali del calendario.
Quindi, con l'aiuto del metodo Math.floor () calcoliamo in quale riga verrà assegnato un determinato oggetto Door (ci saranno 6 righe).
Infine aggiungiamo un margine del 10% per ogni oggetto Door moltiplicando la sua altezza usando un moltiplicatore 1.1.
function Door (calendar, day) this.width = ((calendar.width - 0.1 * calendar.width) / 4) * 0.95; this.height = ((calendar.height - 0.1 * calendar.height) / 6) * 0.95; this.adventMessage = 'Giorno' + giorno + 'di Avvento \ n \ n' + '"' + messaggi [giorno - 1] [0] + '" \ n \ n \ t' + 'di' + messaggi [giorno - 1] [1] + '\ n \ n'; this.x = (0.04 * calendar.width + ((day - 1)% 4) * (1.1 * this.width)); this.y = - (0.96 * calendar.height - Math.floor ((day - 1) / 4) * (1.1 * this.height)); this.content = function () ...;
Passaggio 7: compilare il “Soddisfare()” Metodo
È il soddisfare() metodo che mostrerà le nostre porte nel browser. Prima di tutto, creiamo un nuovo nodo DOM con l'aiuto della variabile nodo quello creerà il
Poiché la classe Door verrà istanziata 24 volte in un ciclo for nel passaggio successivo (Step 8), ciò significa che avremo 24
La proprietà node.id nella riga successiva aggiunge un selettore di identificazione univoco a ciascun elemento di lista (porta). Avremo bisogno di questo per poter scorrere correttamente i giorni nel passaggio successivo (Passaggio 8). In questo modo la porta 1 avrà un id =”door1", La porta 2 avrà un id =”door2" selettore, ecc.
La proprietà node.style.cssText nella riga successiva aggiunge alcune regole CSS a ciascun elemento dell'elenco (porta) con l'aiuto di style =”... ” Attributo HTML utilizzato per includere CSS in linea nei file HTML. Il node.style.cssText proprietà usa le proprietà della classe Door che abbiamo impostato nel passaggio precedente (Passaggio 6).
Per rendere selezionabile il nostro oggetto Porta, è necessario aggiungere un tag all'interno degli elementi della lista. Raggiungiamo questo obiettivo con l'aiuto di innerNode variabile che leghiamo come elemento figlio all'elemento di elenco appropriato identificato dal id =”porta [i]” selettore (con [i] il numero del giorno), usando il metodo DOM appendChild () proprio come prima.
La proprietà innerHTML nella riga successiva mostra il giorno corrente (1-24) in cima alla porta nel browser, e aggiungiamo anche un href =”#” attributo ai nostri tag di ancoraggio tramite la proprietà DOM href.
Infine, nell'istruzione if-else, valutiamo se un oggetto Door debba essere abilitato o disabilitato. Innanzitutto, esaminiamo se siamo nel dodicesimo mese dell'anno (dicembre) utilizzando il metodo getMonth () dell'oggetto Date. Dobbiamo aggiungere 1, perché getMonth () è a base zero (gennaio è il mese 0, ecc.).
Dopo questo, controlliamo se la data corrente è contenuta nel data odierna la variabile globale impostata nel passaggio 5 è inferiore alla giorno che l'attuale oggetto Porta rappresenta.
Se non è dicembre, o il giorno rappresentato dalla porta data è più grande della data corrente, la porta dovrebbe essere disabilitata, in tutti gli altri casi deve essere abilitata in modo che gli utenti possano cliccarci sopra e vedere il relativo messaggio dell'avvento.
Se la porta è disabilitata, aggiungiamo a class =”Disabilitato” selettore al tag di ancoraggio specificato con l'aiuto della proprietà className. Ricorda, abbiamo già disegnato il .Disabilitato classe con CSS al punto 4. Dobbiamo anche impostare l'attributo dell'evento HTML onclick per restituire false.
Se la porta è in stato abilitato, aggiungiamo il adventMessage proprietà a un messaggio di avviso e posizionarlo all'interno dell'attributo evento HTML onclick.
this.content = function () var node = document.createElement ("li"); document.getElementById ( "adventDoors") appendChild (nodo).; node.id = "door" + day; node.style.cssText = "width:" + this.width + "px; height:" + this.height + "px; top:" + this.y + "px; left:" + this.x + "px ; "; var innerNode = document.createElement ("a"); document.getElementById ("door" + day) .appendChild (innerNode); innerNode.innerHTML = giorno; innerNode.href = "#"; if ((currentDate.getMonth () + 1) < 12 || currentDate.getDate() < day ) innerNode.className = "disabled"; innerNode.onclick = function() return false; else var adventMessage = this.adventMessage; innerNode.onclick = function() alert(adventMessage); return false; ; Passaggio 8: inizializza il “Porta” Oggetti
Infine, dobbiamo inizializzare la classe Door 24 volte.
Per fare ciò, usiamo un'espressione di funzione immediatamente richiamata che è abbastanza utile qui, perché non abbiamo bisogno di una variabile dato che vogliamo solo eseguire il codice all'interno della funzione una volta.
Creiamo a porte[] array che manterrà gli oggetti di 24 porte. Passiamo in rassegna i giorni da 1 a 24 (saranno gli elementi 0-23th dell'array doors [], dato che gli array sono a base zero) e infine restituiscono l'intero porte[] array inclusi gli oggetti 24 Door per visualizzarli nel browser.
(function () var doors = []; for (var i = 0; i < 24; i++) doors[i] = new Door(myCal, i + 1); doors[i].content(); return doors; )();
- dimostrazione
- Scarica fonte
